"use client"; import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode, } from "react"; import { en, type Dictionary } from "./dictionaries/en"; import { ar } from "./dictionaries/ar"; import { DEFAULT_LOCALE, dirFor, isLocale, STORAGE_KEY, type I18nValue, type Locale } from "./types"; /** * A typed, tiny i18n provider. No external dependency on purpose: the app needs * exactly two locales and a script in the root layout already applies the saved * one before the first paint to avoid an RTL/LTR flash. * * `t` interpolates `{name}` segments. Values are always strings, so translators * cannot accidentally return objects and RTL keying stays predictable. */ const I18nContext = createContext(null); const dictionaries: Record = { en, ar }; function interpolate(template: string, variables?: Record): string { if (!variables) return template; return template.replace(/\{(\w+)\}/g, (match, key: string) => key in variables ? String(variables[key]) : match, ); } export function I18nProvider({ children }: { children: ReactNode }) { const [locale, setLocaleState] = useState(DEFAULT_LOCALE); useEffect(() => { const raw = localStorage.getItem(STORAGE_KEY); const saved = isLocale(raw) ? raw : null; // Read the saved locale after mount on purpose: SSR is always "en", so a // lazy initializer would break hydration; the inline script already set // before first paint. // eslint-disable-next-line react-hooks/set-state-in-effect if (saved) setLocaleState(saved); }, []); const setLocale = useCallback((next: Locale) => { try { localStorage.setItem(STORAGE_KEY, next); } catch { // private mode — the session still carries it } setLocaleState(next); document.documentElement.lang = next; document.documentElement.dir = dirFor(next); }, []); const toggle = useCallback(() => { setLocaleState((current) => { const next: Locale = current === "en" ? "ar" : "en"; try { localStorage.setItem(STORAGE_KEY, next); } catch { // ignore } document.documentElement.lang = next; document.documentElement.dir = dirFor(next); return next; }); }, []); useEffect(() => { document.documentElement.lang = locale; document.documentElement.dir = dirFor(locale); }, [locale]); const value = useMemo( () => ({ locale, dir: dirFor(locale), setLocale, toggle }), [locale, setLocale, toggle], ); return {children}; } export function useI18n() { const context = useContext(I18nContext); if (!context) throw new Error("useI18n must be used inside "); return context; } /** The `t` helper with the current locale baked in. */ export function useT() { const { locale } = useI18n(); return useCallback( (key: keyof Dictionary, variables?: Record) => interpolate(dictionaries[locale][key], variables), [locale], ); } export type { Locale, I18nValue } from "./types"; export type { Dictionary } from "./dictionaries/en";