"use client";
import { createContext, useContext, useMemo } from "react";
import {
  localeTag,
  translator,
  type Locale,
  type LanguagePreference,
} from "@/shared/i18n";

type LanguageContext = {
  locale: Locale;
  preference: LanguagePreference;
  detectedLocale: Locale;
};
const I18nContext = createContext<LanguageContext>({
  locale: "en",
  preference: "auto",
  detectedLocale: "en",
});

export function I18nProvider({
  children,
  ...language
}: LanguageContext & { children: React.ReactNode }) {
  const value = useMemo(
    () => language,
    [language.locale, language.preference, language.detectedLocale],
  );
  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
}

export function useI18n() {
  const language = useContext(I18nContext);
  return useMemo(
    () => ({
      ...language,
      t: translator(language.locale),
      formatNumber: (value: number) =>
        value.toLocaleString(localeTag(language.locale)),
      formatDate: (value: string) =>
        new Date(value).toLocaleDateString(localeTag(language.locale)),
    }),
    [language],
  );
}