import { useGT } from 'gt-react';

function MyComponent() {
  const t = useGT();
  return (
    <input 
      placeholder={t('Saisissez votre e-mail')}
      title={t('Champ pour l'adresse e-mail')}
    />
  );
}

const t = useGT();

<input 
  placeholder={t('Rechercher des produits...')}
  aria-label={t('Champ de recherche de produits')}
  title={t('Saisissez du texte pour rechercher dans notre catalogue')}
/>

const t = useGT();

const user = {
  name: 'John',
  role: 'admin',
  bio: t('Développeur logiciel expérimenté avec 5 ans d'expérience avec React'),
  status: t('Actuellement disponible pour de nouveaux projets')
};

const t = useGT();

const navigationItems = [
  { label: t('Accueil'), href: '/' },
  { label: t('Produits'), href: '/products' },
  { label: t('Contact'), href: '/contact' }
];

// ✅ Utilisez <T> pour le contenu JSX
<T><p>Bienvenue dans <strong>notre boutique</strong> !</p></T>

// ✅ Utilisez la traduction de chaînes pour le texte brut
<input placeholder={t('Rechercher des produits')} />

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

// Chaîne avec paramètre substituable
const message = t('Vous avez {count} articles dans votre panier', { count: itemCount });
// Résultat : « Vous avez 5 articles dans votre panier »

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

const confirmation = t(
  'Commande {orderId} d'un montant de {total} $ passée le {date}',
  { 
    orderId: order.id, 
    total: order.total, 
    date: order.date 
  }
);

const t = useGT();
translate('Il y a {count, plural, =0 {aucun article} =1 {un article} other {{count} articles}} dans le panier', { count: 10 });

import { useGT } from 'gt-react';

function ContactForm() {
  const t = useGT();
  
  return (
    <form>
      <input 
        type="email"
        placeholder={t('Saisissez votre adresse e-mail')}
        aria-label={t('Champ de saisie pour l'e-mail')}
      />
      <textarea 
        placeholder={t('Parlez-nous de votre projet...')}
        aria-label={t('Description du projet')}
      />
      <button type="submit">
        {t('Envoyer le message')}
      </button>
    </form>
  );
}

import { useGT } from 'gt-react';

function Navigation() {
  const t = useGT();
  
  const menuItems = [
    { label: t('Accueil'), href: '/', icon: 'home' },
    { label: t('À propos'), href: '/about', icon: 'info' },
    { label: t('Services'), href: '/services', icon: 'briefcase' },
    { label: t('Contact'), 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('Électronique') },
      { id: 'clothing', name: t('Vêtements') },
      { id: 'books', name: t('Livres') }
    ],
    statusMessages: {
      available: t('En stock et prêt à être expédié'),
      backordered: t('Actuellement en rupture de stock - expédition dans 2 à 3 semaines'),  
      discontinued: t('Cet article n'est plus disponible')
    },
    errors: {
      notFound: t('Produit introuvable'),
      outOfStock: t('Désolé, cet article est actuellement en rupture de stock')
    }
  };
}

// 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('Catalogue de produits - Trouvez ce qu'il vous faut');
    
    // Update meta description
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', t('Parcourez notre vaste collection de produits de qualité'));
    }
  }, [t]);
  
  return (
    <div>
      <h1>{t('Produits phares')}</h1>
      <p>{t('Découvrez nos derniers articles et nos meilleures ventes')}</p>
    </div>
  );
}

// ❌ Le contenu dynamique ne fonctionnera pas
function MyComponent() {
  const [userMessage, setUserMessage] = useState('');
  const t = useGT();
  
  return <p>{t(userMessage)}</p>; // Cela échouera
}

// ✅ Utilisez des chaînes prédéfinies
function MyComponent() {
  const [messageType, setMessageType] = useState('welcome');
  const t = useGT();
  
  const messages = {
    welcome: t('Bienvenue dans notre application !'),
    goodbye: t('Merci de votre visite !')
  };
  
  return <p>{messages[messageType]}</p>;
}

// ❌ N'appelez pas les hooks de manière conditionnelle
function MyComponent({ showMessage }) {
  if (showMessage) {
    const t = useGT(); // Violation de la règle des hooks
    return <p>{t('Hello!')}</p>;
  }
  return null;
}

// ✅ Appelez toujours les hooks au niveau racine
function MyComponent({ showMessage }) {
  const t = useGT();
  
  if (showMessage) {
    return <p>{t('Hello!')}</p>;
  }
  return null;
}