"use client";

import { useLocale, useTranslations } from "next-intl";
import { usePathname, useRouter, locales, type Locale } from "@/i18n/routing";

const labels: Record<Locale, string> = {
  ru: "RU",
  en: "EN",
  be: "BE",
  tg: "TG",
  ky: "KY",
  zh: "中文",
};

export function LocaleSwitcher() {
  const locale = useLocale() as Locale;
  const router = useRouter();
  const pathname = usePathname();
  const t = useTranslations("a11y");

  return (
    <label className="inline-flex items-center gap-1.5 text-sm">
      <span className="sr-only">{t("language")}</span>
      <select
        className="h-9 rounded-[10px] border border-[var(--border)] bg-[var(--surface)] px-2 text-sm font-medium text-[var(--neutral-700)]"
        value={locale}
        aria-label={t("language")}
        onChange={(e) => {
          router.replace(pathname, { locale: e.target.value as Locale });
        }}
      >
        {locales.map((l) => (
          <option key={l} value={l}>
            {labels[l]}
          </option>
        ))}
      </select>
    </label>
  );
}