import { Skeleton } from "@/components/ui/skeleton";
import { trpc } from "@/lib/trpc";
import { assetUrl } from "@/lib/asset";
import { Link } from "wouter";

export default function Apresentadores() {
  const { data, isLoading } = trpc.podcast.getApresentadores.useQuery({ page: 1, limit: 60 });

  return (
    <>
      <div className="p-8 pb-32">
        <h1 className="text-4xl font-bold font-display text-sof-text mb-2">Apresentadores</h1>
        <p className="text-sof-text-3 mb-8">Conheça quem está por trás dos episódios</p>

        {isLoading ? (
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-8">
            {Array(8).fill(0).map((_, i) => (
              <div key={i} className="space-y-3">
                <Skeleton className="aspect-square rounded-full bg-sof-surface" />
                <Skeleton className="h-4 w-3/4 mx-auto bg-sof-surface" />
              </div>
            ))}
          </div>
        ) : data && data.apresentadores.length > 0 ? (
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-8">
            {data.apresentadores.map(ap => (
              <Link key={ap.id} href={`/apresentador/${ap.id}`}>
                <div className="text-center group cursor-pointer">
                  <div className="relative aspect-square mb-4 overflow-hidden rounded-full border-2 border-transparent group-hover:border-sof-gold transition-all shadow-lg">
                    <img
                      src={assetUrl(ap.foto) ?? assetUrl("/placeholder-user.svg")}
                      alt={ap.nome}
                      className="object-cover w-full h-full grayscale group-hover:grayscale-0 transition-all duration-500"
                    />
                  </div>
                  <p className="text-sm font-bold text-sof-text group-hover:text-sof-gold transition-colors truncate">
                    {ap.nome}
                  </p>
                </div>
              </Link>
            ))}
          </div>
        ) : (
          <p className="text-sof-text-3">Nenhum apresentador encontrado.</p>
        )}
      </div>
    </>
  );
}
