import FaixaRow from "@/components/FaixaRow";
import { trpc } from "@/lib/trpc";

/**
 * MusicaFaixas — listagem pública de todas as faixas.
 * Rota: /musica e /musica/faixas (alias — ambas apontam para este componente).
 */
export default function MusicaFaixas() {
  const { data, isLoading } = trpc.musica.getFaixas.useQuery({ page: 1, limit: 60 });

  return (
    <div className="pb-32">
      <h1 className="text-4xl font-bold font-display text-sof-text mb-2">Faixas</h1>
      <p className="text-sof-text-3 mb-8">Todas as faixas do SpotOnFide Música</p>

      {isLoading ? (
        <p className="text-sof-text-3">Carregando...</p>
      ) : data && data.faixas.length > 0 ? (
        <div className="bg-sof-surface/30 rounded-2xl border border-sof-border overflow-hidden divide-y divide-sof-border/50">
          {data.faixas.map((fx, idx) => (
            <FaixaRow key={fx.id} faixa={fx} index={idx} queue={data.faixas} queueIndex={idx} />
          ))}
        </div>
      ) : (
        <p className="text-sof-text-3">Nenhuma faixa encontrada.</p>
      )}
    </div>
  );
}