import { useGT } from 'gt-react';

function MyComponent() {
  const t = useGT();
  return (
    <input 
      placeholder={t('Introduce tu correo electrónico')}
      title={t('Campo de correo electrónico')}
    />
  );
}

const t = useGT();

<input 
  placeholder={t('Buscar productos...')}
  aria-label={t('Campo de búsqueda de productos')}
  title={t('Escribe para buscar en nuestro catálogo')}
/>

const t = useGT();

const user = {
  name: 'John',
  role: 'admin',
  bio: t('Desarrollador de software con 5 años de experiencia en React'),
  status: t('Disponible actualmente para proyectos')
};

const t = useGT();

const navigationItems = [
  { label: t('Inicio'), href: '/' },
  { label: t('Productos'), href: '/products' },
  { label: t('Contacto'), href: '/contact' }
];

// ✅ Usa <T> para contenido JSX
<T><p>¡Bienvenidos a <strong>nuestra tienda</strong>!</p></T>

// ✅ Usa la traducción de cadenas para texto sin formato
<input placeholder={t('Buscar productos')} />

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

// String with placeholder
const message = t('Tienes {count} artículos en el carrito', { count: itemCount });
// Resultado: "Tienes 5 artículos en el carrito"

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

const confirmation = t(
  'El pedido {orderId} por ${total} se realizó el {date}',
  { 
    orderId: order.id, 
    total: order.total, 
    date: order.date 
  }
);

const t = useGT();
translate('Hay {count, plural, =0 {ningún artículo} =1 {un artículo} other {{count} artículos}} en el carrito', { count: 10 });

import { useGT } from 'gt-react';

function ContactForm() {
  const t = useGT();
  
  return (
    <form>
      <input 
        type="email"
        placeholder={t('Introduce tu dirección de correo electrónico')}
        aria-label={t('Campo de entrada de correo electrónico')}
      />
      <textarea 
        placeholder={t('Cuéntanos sobre tu proyecto...')}
        aria-label={t('Descripción del proyecto')}
      />
      <button type="submit">
        {t('Enviar mensaje')}
      </button>
    </form>
  );
}

import { useGT } from 'gt-react';

function Navigation() {
  const t = useGT();
  
  const menuItems = [
    { label: t('Inicio'), href: '/', icon: 'home' },
    { label: t('Sobre nosotros'), href: '/about', icon: 'info' },
    { label: t('Servicios'), href: '/services', icon: 'briefcase' },
    { label: t('Contacto'), 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('Electrónica') },
      { id: 'clothing', name: t('Ropa') },
      { id: 'books', name: t('Libros') }
    ],
    statusMessages: {
      available: t('En stock y listo para enviar'),
      backordered: t('Actualmente en pedido pendiente - se enviará en 2-3 semanas'),  
      discontinued: t('Este artículo ha sido descatalogado')
    },
    errors: {
      notFound: t('Producto no encontrado'),
      outOfStock: t('Lo sentimos, este artículo no está disponible actualmente')
    }
  };
}

// 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('Catálogo de productos: encuentra lo que necesitas');
    
    // Update meta description
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', t('Explora nuestra amplia selección de productos de alta calidad'));
    }
  }, [t]);
  
  return (
    <div>
      <h1>{t('Productos destacados')}</h1>
      <p>{t('Descubre nuestros artículos más recientes y populares')}</p>
    </div>
  );
}

// ❌ El contenido dinámico no funcionará
function MyComponent() {
  const [userMessage, setUserMessage] = useState('');
  const t = useGT();
  
  return <p>{t(userMessage)}</p>; // Esto fallará
}

// ✅ Usa cadenas predefinidas
function MyComponent() {
  const [messageType, setMessageType] = useState('welcome');
  const t = useGT();
  
  const messages = {
    welcome: t('¡Bienvenido a nuestra app!'),
    goodbye: t('¡Gracias por visitarnos!')
  };
  
  return <p>{messages[messageType]}</p>;
}

// ❌ No llames a los hooks condicionalmente
function MyComponent({ showMessage }) {
  if (showMessage) {
    const t = useGT(); // Incumplimiento de la regla de hooks
    return <p>{t('¡Hola!')}</p>;
  }
  return null;
}

// ✅ Llama siempre a los hooks en el nivel superior
function MyComponent({ showMessage }) {
  const t = useGT();
  
  if (showMessage) {
    return <p>{t('¡Hola!')}</p>;
  }
  return null;
}