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

// --- 1. AÑADIR LA PROP A LA INTERFAZ ---
interface Props {
    eleccionId: number;
    focoDistritoId?: string;
    focoCategoriaId?: number;
    cantidadResultados?: number;
    mostrarBancas?: boolean; // Booleano opcional
}

// --- 2. RECIBIR LA PROP Y ESTABLECER UN VALOR POR DEFECTO ---
export const ResultadosNacionalesCardsWidget = ({ 
    eleccionId, 
    focoDistritoId, 
    focoCategoriaId, 
    cantidadResultados,
    mostrarBancas = false // Por defecto, no se muestran las bancas
}: Props) => {
    
    const { data, isLoading, error } = useQuery({
        queryKey: ['resumenPorProvincia', eleccionId, focoDistritoId, focoCategoriaId, cantidadResultados],
        
        queryFn: () => getResumenPorProvincia(eleccionId, {
            focoDistritoId,
            focoCategoriaId,
            cantidadResultados
        }),
    });

    if (isLoading) return <div>Cargando resultados por provincia...</div>;
    if (error) return <div>Error al cargar los datos.</div>;
    if (!data || data.length === 0) return <div>No hay resultados para mostrar con los filtros seleccionados.</div>

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