// src/App.tsx
import { useState } from 'react';
import { MunicipioWidget } from './components/MunicipioWidget';
import { MunicipioSelector } from './components/MunicipioSelector';
import './App.css';
import { ResumenProvincialWidget } from './components/ResumenProvincialWidget';
import { BancasWidget } from './components/BancasWidget';
import { TelegramasView } from './components/TelegramasView';

function App() {
  const [selectedMunicipioId, setSelectedMunicipioId] = useState<string | null>(null);

  return (
    <>
      <h1>Elecciones 2025 - Resultados en Vivo</h1>
      <section>
        <ResumenProvincialWidget distritoId="02" />
      </section>

      <hr />
      
      
      
      <section>
        {/* Usamos el ID del distrito de Bs As ("02") */}
        <ResumenProvincialWidget distritoId="02" />
      </section>

      <hr />
      
      <section>
        <h2>Consulta por Municipio</h2>
        <MunicipioSelector onMunicipioChange={setSelectedMunicipioId} municipios={[]} />
        {selectedMunicipioId && (
          <div style={{ marginTop: '20px' }}>
            <MunicipioWidget municipioId={selectedMunicipioId} />
          </div>
        )}
      </section>
      
      <section>
        <h2>Proyección de Bancas</h2>
        {/* Usamos el ID de la sección de La Plata ("0001") como ejemplo */}
        <BancasWidget seccionId="0001" /> 
      </section>

      <hr />
      
      <section>
        <h2>Consulta de Resultados por Municipio</h2>
        <MunicipioSelector onMunicipioChange={setSelectedMunicipioId} municipios={[]} />
        {selectedMunicipioId && (
          <div style={{ marginTop: '20px' }}>
            <MunicipioWidget municipioId={selectedMunicipioId} />
          </div>
        )}
      </section>

      <hr />

      <section>
        <h2>Explorador de Telegramas</h2>
        <TelegramasView />
      </section>
    </>
  );
}

export default App;