// src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.tsx
import { useQuery } from '@tanstack/react-query';
import { getResumenPorProvincia } from '../../../apiService';
import { ProvinciaCard } from './components/ProvinciaCard';
import './ResultadosNacionalesCardsWidget.css';

interface Props {
    eleccionId: number;
}

export const ResultadosNacionalesCardsWidget = ({ eleccionId }: Props) => {
    const { data, isLoading, error } = useQuery({
        queryKey: ['resumenPorProvincia', eleccionId],
        queryFn: () => getResumenPorProvincia(eleccionId),
    });

    if (isLoading) return <div>Cargando resultados por provincia...</div>;
    if (error) return <div>Error al cargar los datos.</div>;

    return (
        <section className="cards-widget-container">
            <h2>Resultados elecciones nacionales 2025</h2>
            <div className="cards-grid">
                {data?.map(provinciaData => (
                    <ProvinciaCard key={provinciaData.provinciaId} data={provinciaData} />
                ))}
            </div>
        </section>
    );
};