Elecciones-2025/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.tsx

// src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.tsx
import { useQuery } from '@tanstack/react-query';
import { getResumenPorProvincia } from '../../../apiService';
import { ProvinciaCard } from './components/ProvinciaCard';
// 1. La importación de CSS ahora se hace como un módulo
import styles from './ResultadosNacionalesCardsWidget.module.css';

interface Props {
    eleccionId: number;
    focoDistritoId?: string;
    focoCategoriaId?: number;
    cantidadResultados?: number;
    mostrarBancas?: boolean;
}

export const ResultadosNacionalesCardsWidget = ({ 
    eleccionId, 
    focoDistritoId, 
    focoCategoriaId, 
    cantidadResultados,
    mostrarBancas = false
}: Props) => {
    
    const { data, isLoading, error } = useQuery({
        queryKey: ['resumenPorProvincia', eleccionId, focoDistritoId, focoCategoriaId, cantidadResultados],
        
        queryFn: () => getResumenPorProvincia(eleccionId, {
            focoDistritoId,
            focoCategoriaId,
            cantidadResultados
        }),
        refetchInterval: 30000,
    });

    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>

    // 2. Todas las props 'className' ahora usan el objeto 'styles'
    return (
        <section className={styles.cardsWidgetContainer}>
            <div className={styles.cardsGrid}>
                {data?.map(provinciaData => (
                    <ProvinciaCard 
                        key={provinciaData.provinciaId} 
                        data={provinciaData} 
                        mostrarBancas={mostrarBancas} 
                    />
                ))}
            </div>
        </section>
    );
};