import { trpc } from "../lib/trpc";

export function Home() {
  const { data: livros, isLoading } = trpc.biblioteca.getCatalogo.useQuery();

  return (
    <main className="min-h-dvh bg-gradient-to-b from-[#3a0d14] to-black text-white px-4 py-6">
      <header className="flex items-center justify-between mb-6">
        <span className="font-medium">Biblioteca OnFide</span>
      </header>

      <section aria-label="todos os livros">
        <h2 className="text-sm text-white/60 mb-3">todos os livros</h2>
        {isLoading && <p className="text-white/60 text-sm">carregando...</p>}
        <div className="grid grid-cols-3 gap-4">
          {livros?.map((livro) => (
            <div key={livro.id}>
              <div className="aspect-[2/3] bg-white/10 rounded-md" />
              <p className="text-xs mt-1 truncate">{livro.titulo}</p>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}
