import { useTranslation } from 'react-i18next'
import { Languages } from 'lucide-react'
import { supportedLngs, type SupportedLng } from '@/lib/i18n'

/**
 * Простой селектор языка — выпадающий <select>. Текущий язык хранится в
 * localStorage['fm.lang'] (i18next-browser-languagedetector делает это
 * автоматически), смена применяется мгновенно ко всем useTranslation()-
 * хукам в дереве компонентов.
 *
 * Для kz (государственный РК) пока fallback на ru — нужен живой переводчик;
 * в селекте его не показываем чтобы не вводить в заблуждение.
 */
export function LanguageSwitcher() {
  const { i18n, t } = useTranslation()
  const current = (i18n.resolvedLanguage ?? i18n.language ?? 'ru') as SupportedLng

  return (
    <label className="inline-flex items-center gap-1.5 text-xs text-slate-500" title={t('lang.' + current)}>
      <Languages className="w-3.5 h-3.5" />
      <select
        value={current}
        onChange={(e) => {
          const v = e.target.value as SupportedLng
          void i18n.changeLanguage(v)
        }}
        className="bg-transparent text-slate-600 dark:text-slate-300 focus:outline-none cursor-pointer"
      >
        {supportedLngs.map((lng) => (
          <option key={lng} value={lng}>
            {t('lang.' + lng)}
          </option>
        ))}
      </select>
    </label>
  )
}
