import { useTranslation } from "react-i18next";
import {
  persistLanguage,
  SUPPORTED_LANGUAGES,
  type SupportedLanguage,
} from "../i18n/config";

export function LanguageSwitcher({ compact = false }: { compact?: boolean }) {
  const { t, i18n } = useTranslation("common");
  const current = (i18n.language as SupportedLanguage) || "nl-BE";

  function handleChange(next: SupportedLanguage) {
    void i18n.changeLanguage(next);
    persistLanguage(next);
  }

  return (
    <label className={`language-switcher ${compact ? "language-switcher-compact" : ""}`}>
      <span className="visually-hidden">{t("language.label")}</span>
      <select
        value={current}
        onChange={(event) => handleChange(event.target.value as SupportedLanguage)}
        aria-label={t("language.label")}
      >
        {SUPPORTED_LANGUAGES.map((lang) => (
          <option key={lang} value={lang}>
            {t(`language.${lang}`)}
          </option>
        ))}
      </select>
    </label>
  );
}