import { useGT } from 'gt-react';

function MyComponent() {
  const t = useGT();
  return (
    <input 
      placeholder={t('E-Mail eingeben')}
      title={t('E-Mail-Adressfeld')}
    />
  );
}

const t = useGT();

<input 
  placeholder={t('Produkte suchen...')}
  aria-label={t('Produktsuche')}
  title={t('Tippen, um unseren Katalog zu durchsuchen')}
/>

const t = useGT();

const user = {
  name: 'John',
  role: 'admin',
  bio: t('Erfahrener Softwareentwickler mit 5 Jahren React-Erfahrung'),
  status: t('Derzeit für Projekte verfügbar')
};

const t = useGT();

const navigationItems = [
  { label: t('Startseite'), href: '/' },
  { label: t('Produkte'), href: '/products' },
  { label: t('Kontakt'), href: '/contact' }
];

// ✅ Verwende <T> für JSX-Inhalte
<T><p>Willkommen in <strong>unserem Shop</strong>!</p></T>

// ✅ Verwende String-Übersetzung für einfachen Text
<input placeholder={t('Produkte suchen')} />

const t = useGT();
const itemCount = 5;

// String mit Platzhalter
const message = t('Sie haben {count} Artikel in Ihrem Warenkorb', { count: itemCount });
// Ergebnis: „Sie haben 5 Artikel in Ihrem Warenkorb"

const t = useGT();
const order = { id: 'ORD-123', total: 99.99, date: '2024-01-15' };

const confirmation = t(
  'Bestellung {orderId} über ${total} wurde am {date} aufgegeben',
  { 
    orderId: order.id, 
    total: order.total, 
    date: order.date 
  }
);

const t = useGT();
translate('Es {count, plural, =0 {sind keine Artikel} =1 {ist ein Artikel} other {sind {count} Artikel}} im Warenkorb', { count: 10 });

import { useGT } from 'gt-react';

function ContactForm() {
  const t = useGT();
  
  return (
    <form>
      <input 
        type="email"
        placeholder={t('E-Mail-Adresse eingeben')}
        aria-label={t('E-Mail-Eingabefeld')}
      />
      <textarea 
        placeholder={t('Erzählen Sie uns von Ihrem Projekt...')}
        aria-label={t('Projektbeschreibung')}
      />
      <button type="submit">
        {t('Nachricht senden')}
      </button>
    </form>
  );
}

import { useGT } from 'gt-react';

function Navigation() {
  const t = useGT();
  
  const menuItems = [
    { label: t('Startseite'), href: '/', icon: 'home' },
    { label: t('Über uns'), href: '/about', icon: 'info' },
    { label: t('Leistungen'), href: '/services', icon: 'briefcase' },
    { label: t('Kontakt'), href: '/contact', icon: 'mail' }
  ];

  return (
    <nav>
      {menuItems.map((item) => (
        <a key={item.href} href={item.href} title={item.label}>
          <Icon name={item.icon} />
          {item.label}
        </a>
      ))}
    </nav>
  );
}

// utils/productData.js
export function getProductMessages(t) {
  return {
    categories: [
      { id: 'electronics', name: t('Elektronik') },
      { id: 'clothing', name: t('Bekleidung') },
      { id: 'books', name: t('Bücher') }
    ],
    statusMessages: {
      available: t('Vorrätig und versandbereit'),
      backordered: t('Derzeit im Rückstand – Versand in 2–3 Wochen'),  
      discontinued: t('Dieser Artikel wurde eingestellt')
    },
    errors: {
      notFound: t('Produkt nicht gefunden'),
      outOfStock: t('Leider ist dieser Artikel derzeit nicht auf Lager')
    }
  };
}

// components/ProductCard.jsx
import { useGT } from 'gt-react';
import { getProductMessages } from '../utils/productData';

function ProductCard({ product }) {
  const t = useGT();
  const messages = getProductMessages(t);
  
  return (
    <div>
      <h3>{product.name}</h3>
      <p>{messages.statusMessages[product.status]}</p>
      <span>{messages.categories.find(c => c.id === product.categoryId)?.name}</span>
    </div>
  );
}

import { useGT } from 'gt-react';
import { useEffect } from 'react';

function ProductPage() {
  const t = useGT();
  
  useEffect(() => {
    document.title = t('Produktkatalog - Finden Sie, was Sie brauchen');
    
    // Meta-Beschreibung aktualisieren
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', t('Durchstöbern Sie unsere umfangreiche Auswahl hochwertiger Produkte'));
    }
  }, [t]);
  
  return (
    <div>
      <h1>{t('Empfohlene Produkte')}</h1>
      <p>{t('Entdecken Sie unsere neuesten und beliebtesten Artikel')}</p>
    </div>
  );
}

// ❌ Dynamischer Inhalt funktioniert nicht
function MyComponent() {
  const [userMessage, setUserMessage] = useState('');
  const t = useGT();
  
  return <p>{t(userMessage)}</p>; // Das wird fehlschlagen
}

// ✅ Vordefinierte Strings verwenden
function MyComponent() {
  const [messageType, setMessageType] = useState('welcome');
  const t = useGT();
  
  const messages = {
    welcome: t('Willkommen in unserer App!'),
    goodbye: t('Danke für Ihren Besuch!')
  };
  
  return <p>{messages[messageType]}</p>;
}

// ❌ Hooks nicht bedingt aufrufen
function MyComponent({ showMessage }) {
  if (showMessage) {
    const t = useGT(); // Verletzung der Hook-Regeln
    return <p>{t('Hallo!')}</p>;
  }
  return null;
}

// ✅ Hooks immer auf der obersten Ebene aufrufen
function MyComponent({ showMessage }) {
  const t = useGT();
  
  if (showMessage) {
    return <p>{t('Hallo!')}</p>;
  }
  return null;
}