LanguageContext.tsx

import * as React from 'react';
import { translations } from './translations';

// To avoid potential transpilation issues and make the context more robust,
// we initialize it with a default value that matches the provider's value shape.
const defaultContextValue = {
  language: 'en',
  setLanguage: (lang) => {}, // Default is a no-op function
  t: (key) => translations.en[key] || key, // Default translation function
};

export const LanguageContext = React.createContext(defaultContextValue);

export const LanguageProvider = ({ children }) => {
  const [language, setLanguageState] = React.useState(() => {
    const savedLang = localStorage.getItem('philfo-lang');
    if (savedLang && savedLang in translations) {
      return savedLang;
    }
    return 'en';
  });

  const setLanguage = (lang) => {
    setLanguageState(lang);
    localStorage.setItem('philfo-lang', lang);
  };

  const t = (key) => {
    // Fallback to English if the key is missing in the current language
    return translations[language]?.[key] || translations.en[key];
  };

  const value = {
    language,
    setLanguage,
    t,
  };

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

export const useLanguage = () => {
  // Since we provide a default value to createContext, the context will never be undefined.
  // The check for `undefined` is no longer necessary.
  return React.useContext(LanguageContext);
};