"use client";

import { DEFAULT_LANGUAGE, Language } from "@/lib/language";
import React, { createContext, useContext, useEffect, useState } from "react";


type LangContextType = {
  language: Language;
  setLanguage: (lang: Language) => void;
};

const LanguageContext = createContext<LangContextType | null>(null);

export const LanguageProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const [language, setLanguage] = useState<Language>(DEFAULT_LANGUAGE);

  // Load from localStorage ONCE
  useEffect(() => {
    const stored = localStorage.getItem("selectedLanguage") as Language | null;
    if (stored) setLanguage(stored);
  }, []);

  // Persist on change
  useEffect(() => {
    localStorage.setItem("selectedLanguage", language);
  }, [language]);

  return (
    <LanguageContext.Provider value={{ language, setLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
};

export const useLanguage = () => {
  const ctx = useContext(LanguageContext);
  if (!ctx) throw new Error("useLanguage must be inside LanguageProvider");
  return ctx;
};