'use client'

import { createContext, useContext, useState, useCallback, ReactNode } from 'react'
import { Language } from '../types'
import React from 'react'

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

const LanguageContext = createContext<LanguageContextType>({
  lang: 'de',
  toggleLanguage: () => {},
  setLanguage: () => {},
})

export function LanguageProvider({ children }: { children: ReactNode }) {
  const [lang, setLang] = useState<Language>('de')

  const toggleLanguage = useCallback(() => {
    setLang(prev => prev === 'de' ? 'en' : 'de')
  }, [])

  const setLanguage = useCallback((newLang: Language) => {
    setLang(newLang)
  }, [])

  return React.createElement(
    LanguageContext.Provider,
    { value: { lang, toggleLanguage, setLanguage } },
    children
  )
}

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