"use client";

import { useTranslation } from "@/hooks/useTranslation";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Typography } from "@/components/ui/typography";
import { SUPPORTED_LANGUAGES } from "@/lib/i18n/config";
import { ChevronDownIcon } from "lucide-react";

export function LanguageSwitcher() {
  const { language, setLanguage } = useTranslation();

  return (
    <DropdownMenu>
      <DropdownMenuTrigger className="group">
        <span className="border-[var(--btn-color-sedondary-border)]! bg-[var(--btn-color-secondary)] text-[var(--btn-color-sedondary-text)] hover:bg-[var(--btn-color-secondary-hover)] aria-expanded:bg-[var(--btn-color-secondary-hover)] aria-expanded:text-[var(--btn-color-sedondary-text)] disabled:border-[var(--btn-color-sedondary-disabled-border)] disabled:bg-[var(--btn-color-secondary-disabled)] disabled:text-[var(--btn-color-secondary-disabled-text)] group/button inline-flex shrink-0 items-center justify-center rounded-[12px] border border-transparent bg-clip-padding font-sans text-[15px] leading-[22.5px] font-normal tracking-normal text-center whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-100 disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-13 gap-1.5 px-4 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3">
          <Typography
            as="span"
            variant="button"
            className="text-[var(--btn-color-sedondary-text)]"
          >
            {language.toUpperCase()}
          </Typography>
          <ChevronDownIcon className="size-4 text-[var(--btn-color-sedondary-text)] transition-transform group-data-popup-open:rotate-180 group-data-[state=open]:rotate-180" />
        </span>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        {SUPPORTED_LANGUAGES.map((lang) => (
          <DropdownMenuItem
            key={lang}
            onClick={() => setLanguage(lang)}
            className={
              language === lang ? "bg-neutral-100 dark:bg-neutral-800" : ""
            }
          >
            <Typography as="span" variant="body">
              {lang === "en" ? "English" : "العربية"}
            </Typography>
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}