import { useEffect, type ReactNode } from 'react';
import { I18nProvider } from 'react-aria-components';

import { localeOf, useLanguage } from '../i18n/language';

/**
 * The language of the INTERFACE, applied to the primitives library.
 *
 * The service strings of the primitives — scroll hints, "clear the field" — come from the library
 * and would otherwise take the language of the BROWSER: English in the middle of a Russian
 * interface on someone else's machine. The choice itself lives in `src/i18n/language.ts`, next to
 * the catalogue that answers to it; the language of the translated PAIR has nothing to do with this
 * one and lives in the data of the book.
 */
export function Locale({ children }: { children: ReactNode }) {
  const language = useLanguage((state) => state.language);
  const locale = localeOf(language);

  // The `lang` of the document follows the choice too. Otherwise the one thing a second language
  // could not change would be the attribute a screen reader picks its voice by — and index.html,
  // which is not a component, would quietly make the claim "a language is added without touching a
  // component" false.
  useEffect(() => {
    document.documentElement.lang = locale;
  }, [locale]);

  return <I18nProvider locale={locale}>{children}</I18nProvider>;
}