import { createContext, useContext, useEffect, useState, type ReactNode } from "react";

export type Lang = "si" | "en";
export type T = { si: string; en: string };

const Ctx = createContext<{ lang: Lang; setLang: (l: Lang) => void; t: (x: T) => string }>({
  lang: "si",
  setLang: () => {},
  t: (x) => x.si,
});

export function LanguageProvider({ children }: { children: ReactNode }) {
  const [lang, setLangState] = useState<Lang>("si");
  useEffect(() => {
    const saved = localStorage.getItem("lang");
    if (saved === "en" || saved === "si") setLangState(saved);
  }, []);
  useEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);
  const setLang = (l: Lang) => {
    setLangState(l);
    localStorage.setItem("lang", l);
  };
  return <Ctx.Provider value={{ lang, setLang, t: (x) => x[lang] }}>{children}</Ctx.Provider>;
}

export const useLang = () => useContext(Ctx);