// src/app/page.tsx (Página principal do seu e-commerce)

import { useGetProducts } from '@/hooks/useGetProducts';
import { ProductCard } from '@/components/ProductCard';

export default function Home() {
  // 1. Chamamos o "Garçom Inteligente" (TanStack Query)
  const { data: products, isLoading, isError, error } = useGetProducts();

  // 2. ⚡ [PERFORMANCE/INP]: Tratamento de estados da UI (early returns)
  if (isLoading) {
    // Exibimos um skeleton loading ou um spinner enquanto espera.
    // Isso é crucial para o LCP (Largest Contentful Paint).
    return <p className="text-center mt-8 text-lg text-gray-500">Carregando produtos...</p>;
  }

  if (isError) {
    // Tratamento de erro robusto. O erro é pego pelo Zod ou pela rede.
    // Exibe a mensagem de erro para debug, mas em produção, exiba algo amigável.
    return <p className="text-center mt-8 text-lg text-red-600">Erro ao carregar os produtos: {error.message}</p>;
  }

  // 3. Renderiza a lista de produtos (Vitrine)
  return (
    <main className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-6">Nossos Produtos</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {products?.map((product) => (
          // O key é importante para performance do React.
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </main>
  );
}