"use client";

import Link from "next/link";
import { ChevronDown, Globe2 } from "lucide-react";

import { locales, type Locale } from "@/lib/locales";

const languageLabels: Record<Locale, string> = {
  en: "EN",
  hi: "HI",
  gu: "GU",
};

const languageHeading: Record<Locale, string> = {
  en: "Language",
  hi: "भाषा",
  gu: "ભાષા",
};

export default function ProductLanguageSwitcher({
  closeMenus,
  locale,
  localePaths,
  mobile = false,
  open,
  toggle,
}: {
  closeMenus: () => void;
  locale: Locale;
  localePaths: Record<Locale, string>;
  mobile?: boolean;
  open: boolean;
  toggle: () => void;
}) {
  if (mobile) {
    return (
      <div className="rounded-2xl border border-[#e5e9f4] bg-[#fbfcff] p-3">
        <p className="mb-2.5 flex items-center gap-2 text-[12px] font-extrabold uppercase tracking-[0.12em] text-[#65708a]">
          <Globe2 size={15} />
          {languageHeading[locale]}
        </p>
        <div className="grid grid-cols-3 gap-2">
          {locales.map((supportedLocale) => (
            <Link
              key={supportedLocale}
              href={localePaths[supportedLocale]}
              onClick={closeMenus}
              className={`rounded-xl px-3 py-2.5 text-center text-[12px] font-extrabold transition ${
                supportedLocale === locale
                  ? "bg-[#202d5e] text-white"
                  : "border border-[#e5e9f4] bg-white text-[#4c5874]"
              }`}
            >
              {languageLabels[supportedLocale]}
            </Link>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="relative">
      <button
        type="button"
        aria-expanded={open}
        onClick={toggle}
        suppressHydrationWarning
        className="flex items-center gap-1.5 rounded-lg px-2 py-2 text-[12px] font-bold text-[#536078] transition hover:bg-[#f5f7fc]"
      >
        <Globe2 size={15} />
        {languageLabels[locale]}
        <ChevronDown size={12} className={open ? "rotate-180 transition" : "transition"} />
      </button>
      {open ? (
        <div suppressHydrationWarning className="absolute right-0 top-11 w-32 rounded-xl border border-[#e4e8f3] bg-white p-1.5 shadow-[0_18px_45px_rgba(31,42,82,0.13)]">
          {locales.map((supportedLocale) => (
            <Link
              key={supportedLocale}
              href={localePaths[supportedLocale]}
              onClick={closeMenus}
              className={`block rounded-lg px-3 py-2 text-[12px] font-extrabold transition ${
                supportedLocale === locale
                  ? "bg-[#eef1ff] text-[#5e65d9]"
                  : "text-[#536078] hover:bg-[#f7f8fc]"
              }`}
            >
              {languageLabels[supportedLocale]}
            </Link>
          ))}
        </div>
      ) : null}
    </div>
  );
}