"use client";

import Image from "next/image";
import { ChevronDownIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuRadioGroup, DropdownMenuRadioItem,
} from "@/components/ui/dropdown-menu";
import { languages, isLocale } from "@/lib/i18n/locales";
import { useTranslation } from "./locale-provider";

export function LanguageDropdown() {
  const { locale, setLocale, t } = useTranslation();
  const selected = languages.find((language) => language.code === locale)!;
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" size="sm" />} aria-label={t("Language")}>
        <Image src={selected.flag} alt="" aria-hidden width={24} height={16} />
        <span lang={selected.code}>{selected.name}</span>
        <ChevronDownIcon data-icon="inline-end" />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuRadioGroup value={locale} onValueChange={(value) => { if (isLocale(value)) setLocale(value); }} aria-label={t("Language")}>
          {languages.map((language) => (
            <DropdownMenuRadioItem key={language.code} value={language.code}>
              <Image src={language.flag} alt="" aria-hidden width={24} height={16} />
              <span lang={language.code}>{language.name}</span>
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}