import { useTranslation } from "react-i18next";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

// Код -> нативное название языка (не переводим — так проще узнать свой язык
// в списке, даже если сейчас выставлен совсем другой).
const LANGUAGES: { code: string; label: string }[] = [
  { code: "en", label: "English" },
  { code: "ru", label: "Русский" },
  { code: "zh-CN", label: "中文" },
  { code: "fa", label: "فارسی" },
  { code: "ar", label: "العربية" },
  { code: "tr", label: "Türkçe" },
  { code: "uk", label: "Українська" },
  { code: "be", label: "Беларуская" },
  { code: "vi", label: "Tiếng Việt" },
  { code: "uz", label: "Oʻzbekcha" },
];

export function LanguageToggle() {
  const { i18n, t } = useTranslation();
  const current =
    LANGUAGES.find((l) => l.code === i18n.language)?.code ??
    LANGUAGES.find((l) => i18n.language?.startsWith(l.code.split("-")[0]))
      ?.code ??
    "en";

  return (
    <Select value={current} onValueChange={(lang) => i18n.changeLanguage(lang)}>
      <SelectTrigger
        size="sm"
        aria-label={t("language_toggle")}
        className="rounded-full font-bold text-xs px-3"
      >
        <SelectValue />
      </SelectTrigger>
      <SelectContent align="end">
        {LANGUAGES.map(({ code, label }) => (
          <SelectItem key={code} value={code}>
            {label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}
