'use client'

import { createContext, useContext, useState, useEffect, ReactNode } from 'react'
export type Language = 'en' | 'es' | 'fr'

interface LanguageContextType {
  language: Language
  setLanguage: (lang: Language) => void
}

const LanguageContext = createContext<LanguageContextType | undefined>(undefined)

export function LanguageProvider({ children, initialLang = 'en' }: { children: ReactNode, initialLang?: Language }) {
  const [language, setLanguageState] = useState<Language>(initialLang)

  useEffect(() => {
    setLanguageState(initialLang)
  }, [initialLang])

  useEffect(() => {
    if (typeof document !== 'undefined') {
      document.documentElement.lang = language
    }
  }, [language])

  const setLanguage = (lang: Language) => {
    setLanguageState(lang)
    // We will handle URL updates in the LanguageSelector, here we just update state
    // purely for context consumers that might not rely on URL.
    localStorage.setItem('language', lang)
  }

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

export function useLanguage() {
  const context = useContext(LanguageContext)
  if (context === undefined) {
    throw new Error('useLanguage must be used within a LanguageProvider')
  }
  return context
}