"use client";

import { useEffect, useState } from 'react';
import { useLocale } from 'next-intl';

/**
 * Client-side Hook für Directus-Translations
 * Fetcht Texte über API Route statt direkt
 */
export function useDirectusTranslations(namespace: string) {
  const locale = useLocale();
  const [translations, setTranslations] = useState<Record<string, string>>({});
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function loadTranslations() {
      try {
        const response = await fetch(`/api/i18n/${namespace}?locale=${locale}`);
        if (response.ok) {
          const data = await response.json();
          setTranslations(data);
        }
      } catch (error) {
        console.error('Failed to load translations:', error);
      } finally {
        setLoading(false);
      }
    }

    loadTranslations();
  }, [namespace, locale]);

  return (key: string) => {
    if (loading) return '...';
    return translations[key] || key;
  };
}