Untitled

import { useState, useEffect, useCallback } from 'react';

export type SupportedLanguages = 'EN' | 'DE';

interface NavigationTranslations {
  home: string;
  gallery: string;
  placeholder: string;
  help: string;
  settings: string;
  guide: string;
  components: string;
  fileConventions: string;
  functions: string;
  configOptions: string;
  cli: string;
  edgeRuntime: string;
  accessibility: string;
  fastRefresh: string;
  compiler: string;
  browsers: string;
  turbopack: string;
}

interface CommonTranslations {
  theme: string;
  language: string;
  english: string;
  german: string;
  aiAssistant: string;
  currentFillLevels: string;
}

interface BinTranslations {
  'Biomüll': string;
  'Gelber Sack': string;
  'Papier': string;
  'Restmüll': string;
}

interface Translations {
  navigation: NavigationTranslations;
  common: CommonTranslations;
  bins: BinTranslations;
}

export const translations: Record<SupportedLanguages, Translations> = {
  EN: {
    navigation: {
      home: "Home",
      gallery: "Gallery",
      placeholder: "Placeholder",
      help: "Help",
      settings: "Settings",
      guide: "(Usage) Guide",
      components: "Components",
      fileConventions: "File Conventions",
      functions: "Functions",
      configOptions: "next.config.js Options",
      cli: "CLI",
      edgeRuntime: "Edge Runtime",
      accessibility: "Accessibility",
      fastRefresh: "Fast Refresh",
      compiler: "Next.js Compiler",
      browsers: "Supported Browsers",
      turbopack: "Turbopack"
    },
    common: {
      theme: "Theme",
      language: "Language",
      english: "English",
      german: "German",
      aiAssistant: "AI Recycling Assistant",
      currentFillLevels: "Current Fill Levels"
    },
    bins: {
      'Biomüll': 'Organic',
      'Gelber Sack': 'Recycling',
      'Papier': 'Paper',
      'Restmüll': 'Residual'
    }
  },
  DE: {
    navigation: {
      home: "Startseite",
      gallery: "Galerie",
      placeholder: "Platzhalter",
      help: "Hilfe",
      settings: "Einstellungen",
      guide: "Bedienungsanleitung",
      components: "Komponenten",
      fileConventions: "Dateikonventionen",
      functions: "Funktionen",
      configOptions: "next.config.js Optionen",
      cli: "CLI",
      edgeRuntime: "Edge-Laufzeit",
      accessibility: "Barrierefreiheit",
      fastRefresh: "Schnelle Aktualisierung",
      compiler: "Next.js Compiler",
      browsers: "Unterstützte Browser",
      turbopack: "Turbopack"
    },
    common: {
      theme: "Design",
      language: "Sprache",
      english: "Englisch",
      german: "Deutsch",
      aiAssistant: "KI-Recycling-Assistent",
      currentFillLevels: "Aktuelle Füllstände"
    },
    bins: {
      'Biomüll': 'Biomüll',
      'Gelber Sack': 'Gelber Sack',
      'Papier': 'Papier',
      'Restmüll': 'Restmüll'
    }
  }
};

export function useTranslation(initialLanguage: SupportedLanguages = 'EN') {
  const [language, setLanguage] = useState<SupportedLanguages>(() => {
    if (typeof window !== 'undefined') {
      return (localStorage.getItem('sortimate-language') as SupportedLanguages) || initialLanguage;
    }
    return initialLanguage;
  });

  const [, updateState] = useState({});
  const forceUpdate = useCallback(() => updateState({}), []);

  useEffect(() => {
    const handleLanguageChange = (event: CustomEvent<SupportedLanguages>) => {
      setLanguage(event.detail || 'EN');
      forceUpdate();
    };

    window.addEventListener('languageChange', handleLanguageChange as EventListener);
    return () => window.removeEventListener('languageChange', handleLanguageChange as EventListener);
  }, [forceUpdate]);

  const t = useCallback((key: string): string => {
    const keys = key.split('.');
    let value: any = translations[language];
    
    for (const k of keys) {
      if (value && typeof value === 'object' && k in value) {
        value = value[k];
      } else {
        return key;
      }
    }
    
    return value || key;
  }, [language]);

  return { t, language };
}