import React, { createContext, useContext, useMemo } from 'react';
import { getTranslator, SUPPORTED_LANGUAGES } from './translations';

const LanguageContext = createContext({ t: (key) => key, language: 'de' });

export function LanguageProvider({ language, children }) {
  const lang = SUPPORTED_LANGUAGES.includes(language) ? language : 'de';
  const t = useMemo(() => getTranslator(lang), [lang]);
  const value = useMemo(() => ({ t, language: lang }), [t, lang]);

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

export function useTranslation() {
  return useContext(LanguageContext).t;
}

export function useLanguage() {
  return useContext(LanguageContext).language;
}
