import type { Locale } from "@/types/content";

export type WhatsAppWidgetProps = {
  locale: Locale;
  whatsappNumber: string;
};

export function WhatsAppWidget(props: WhatsAppWidgetProps) {
  return (
    <div className="wa-widget">
      <a className="wa-toggle" href={createWhatsAppUrl(props)} target="_blank" rel="noreferrer" aria-label="Chat with Akarya on WhatsApp">
        <MessageIcon />
        <span>WhatsApp Chat</span>
      </a>
    </div>
  );
}

export function createWhatsAppUrl({ locale, whatsappNumber }: WhatsAppWidgetProps) {
  const message =
    locale === "id"
      ? "Halo Akarya, saya ingin diskusi kebutuhan project AV & IT."
      : "Hello Akarya, I would like to discuss an AV & IT project.";

  return `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(message)}`;
}

export function MessageIcon() {
  return (
    <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none">
      <path
        d="M20 11.5a8.5 8.5 0 0 1-12.9 7.3L4 20l1.2-3A8.5 8.5 0 1 1 20 11.5Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path d="M8.5 10.5h7M8.5 13.5H13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

export function CloseIcon() {
  return (
    <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none">
      <path d="m6 6 12 12M18 6 6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}
