"use client";

import { useState } from "react";
import type { WhatsAppWidgetProps } from "@/components/layout/WhatsAppWidget";
import { CloseIcon, createWhatsAppUrl, MessageIcon } from "@/components/layout/WhatsAppWidget";

export function WhatsAppWidgetClient(props: WhatsAppWidgetProps) {
  const [open, setOpen] = useState(false);
  const url = createWhatsAppUrl(props);
  const { locale } = props;

  return (
    <div className="wa-widget">
      {open ? (
        <section className="wa-popup" aria-label="WhatsApp consultation">
          <div className="wa-header">
            <div>
              <h2>{locale === "id" ? "Butuh konsultasi cepat?" : "Need a quick consultation?"}</h2>
              <p>{locale === "id" ? "Tim Akarya siap bantu arahkan kebutuhan project." : "Akarya team can help guide your project needs."}</p>
            </div>
            <button type="button" onClick={() => setOpen(false)} aria-label="Close WhatsApp chat">
              <CloseIcon />
            </button>
          </div>
          <p className="wa-copy">
            {locale === "id"
              ? "Ceritakan ruang, perangkat, atau sistem yang ingin dibangun. Kami bantu review solusi yang tepat."
              : "Tell us about the room, devices, or system you want to build. We will help review the right solution."}
          </p>
          <div className="wa-agent">
            <span aria-hidden="true">A</span>
            <div>
              <strong>Akarya Project Consultant</strong>
              <p>{locale === "id" ? "Biasanya membalas cepat" : "Usually replies quickly"}</p>
            </div>
          </div>
          <a className="wa-chat" href={url} target="_blank" rel="noreferrer" aria-label="Chat with Akarya on WhatsApp">
            <MessageIcon />
            WhatsApp Chat
          </a>
        </section>
      ) : null}
      <button
        className="wa-toggle"
        type="button"
        onClick={() => setOpen((value) => !value)}
        aria-expanded={open}
        aria-label="Chat with Akarya on WhatsApp"
      >
        <MessageIcon />
        <span>WhatsApp Chat</span>
      </button>
    </div>
  );
}
