import type { Diario } from '@/app/models';
import { Loader2 } from 'lucide-react';
import { DiarioCard } from './diario-card';

interface DiariosListProps {
  diarios: Diario[];
  title?: string;
  subtitle?: string;
  loading?: boolean;
  onDownload?: (id: number) => void;
  onView?: (id: number) => void;
}

export function DiariosList({
  diarios,
  title = 'Últimas Publicações',
  subtitle = 'Acesse as edições mais recentes do Diário Oficial do Município de Ribeirópolis',
  loading = false,
  onDownload,
  onView,
}: DiariosListProps) {
  if (loading) {
    return (
      <div className="flex justify-center items-center py-12">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    );
  }

  return (
    <section className="space-y-6">
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div>
          <p className="text-2xl font-medium text-gray-800 dark:text-gray-100">
            {title}
          </p>
          <p className="text-muted-foreground mt-2 max-w-3xl">{subtitle}</p>
        </div>
        <div className="text-sm text-gray-500 dark:text-gray-400">
          Total de {diarios.length} publicações
        </div>
      </div>

      {diarios.length === 0 ? (
        <div className="text-center py-12 border rounded-lg">
          <p className="text-muted-foreground">Nenhum diário encontrado</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {diarios.map((diario) => (
            <DiarioCard
              key={diario.id}
              diario={diario}
              onDownload={onDownload}
              onView={onView}
            />
          ))}
        </div>
      )}
    </section>
  );
}
