import React, { createContext, useContext, useState } from 'react'
import { ru, en } from '../translations/index.js'

const translations = { ru, en }

const LanguageContext = createContext(null)

export function LanguageProvider({ children }) {
  const [lang, setLang] = useState(() => {
    return (typeof localStorage !== 'undefined' && localStorage.getItem('lang')) || 'ru'
  })

  const toggle = () => {
    const next = lang === 'ru' ? 'en' : 'ru'
    setLang(next)
    if (typeof localStorage !== 'undefined') localStorage.setItem('lang', next)
  }

  const t = (key) => {
    const keys = key.split('.')
    let value = translations[lang]
    for (const k of keys) {
      value = value?.[k]
    }
    return value ?? key
  }

  return (
    <LanguageContext.Provider value={{ lang, toggle, t }}>
      {children}
    </LanguageContext.Provider>
  )
}

export function useLanguage() {
  return useContext(LanguageContext)
}