import { Select } from '@pikku/mantine/core'
import { m } from '@/i18n/messages'
import { useLocale } from '@/i18n/config'
import { supportedLocales } from '@/i18n/config'
import { usePreferences } from '@/contexts/preferences'

const LOCALE_LABELS: Record<string, string> = {
  en: 'English',
  fr: 'Français',
}

export function LanguageSelector() {
  useLocale()
  const { locale, setLocale } = usePreferences()

  const data = supportedLocales.map((code) => ({
    value: code,
    label: LOCALE_LABELS[code] ?? code.toUpperCase(),
  }))

  return (
    <Select
      aria-label={m.preferences__language()}
      data={data}
      value={locale}
      onChange={(v) => v && setLocale(v)}
      size="xs"
      w={110}
      allowDeselect={false}
    />
  )
}