"use client";
import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { Globe2 } from "lucide-react";
import { languageCookie, type LanguagePreference } from "@/shared/i18n";
import { useI18n } from "./I18nProvider";

export function LanguageSwitcher() {
  const { t, preference, detectedLocale } = useI18n();
  const [pending, startTransition] = useTransition();
  const router = useRouter();
  function changeLanguage(value: LanguagePreference) {
    document.cookie = `${languageCookie}=${value}; Path=/; Max-Age=31536000; SameSite=Lax${location.protocol === "https:" ? "; Secure" : ""}`;
    startTransition(() => router.refresh());
  }
  return (
    <label className="language-switcher" aria-busy={pending}>
      <Globe2 size={16} aria-hidden="true" />
      <span className="sr-only">{t("Site language")}</span>
      <select
        aria-label={t("Site language")}
        value={preference}
        disabled={pending}
        onChange={(event) =>
          changeLanguage(event.target.value as LanguagePreference)
        }
      >
        <option value="auto">
          {t("Automatic")} · {detectedLocale === "ru" ? "RU" : "EN"}
        </option>
        <option value="en" lang="en">
          English
        </option>
        <option value="ru" lang="ru">
          Русский
        </option>
      </select>
    </label>
  );
}