import { useI18n } from "../../i18n/I18nContext";
import { LOCALES, type AppLocale } from "../../lib/i18n/types";

/**
 * Compact locale control for public (unauthenticated) pages.
 * Persists via I18nProvider → uiPrefs, same as in-app settings.
 */
export function PublicLocaleSwitch() {
  const { locale, setLocale, t } = useI18n();

  return (
    <div className="hb-public-locale" role="group" aria-label={t("public.localeLabel")}>
      {LOCALES.map((l) => {
        const active = locale === l.id;
        return (
          <button
            key={l.id}
            type="button"
            className={`hb-public-locale__btn${active ? " is-active" : ""}`}
            aria-pressed={active}
            data-locale={l.id}
            onClick={() => setLocale(l.id as AppLocale)}
          >
            {t(`locale.${l.id}`)}
          </button>
        );
      })}
    </div>
  );
}
