78 lines
3.6 KiB
TypeScript
78 lines
3.6 KiB
TypeScript
|
// src/features/legislativas/nacionales/components/ProvinciaCard.tsx
|
||
|
|
import type { ResumenProvincia } from '../../../../types/types';
|
||
|
|
import { MiniMapaSvg } from './MiniMapaSvg';
|
||
|
|
import { ImageWithFallback } from '../../../../components/common/ImageWithFallback';
|
||
|
|
import { assetBaseUrl } from '../../../../apiService';
|
||
|
|
|
||
|
|
interface ProvinciaCardProps {
|
||
|
|
data: ResumenProvincia;
|
||
|
|
}
|
||
|
|
|
||
|
|
const formatNumber = (num: number) => num.toLocaleString('es-AR');
|
||
|
|
const formatPercent = (num: number) => `${num.toFixed(2).replace('.', ',')}%`;
|
||
|
|
|
||
|
|
export const ProvinciaCard = ({ data }: ProvinciaCardProps) => {
|
||
|
|
// Determinamos el color del ganador para pasárselo al mapa.
|
||
|
|
// Si no hay ganador, usamos un color gris por defecto.
|
||
|
|
const colorGanador = data.resultados[0]?.color || '#d1d1d1';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="provincia-card">
|
||
|
|
<header className="card-header">
|
||
|
|
<div className="header-info">
|
||
|
|
<h3 style={{ whiteSpace: 'normal' }}>{data.provinciaNombre}</h3>
|
||
|
|
<span>DIPUTADOS NACIONALES</span>
|
||
|
|
</div>
|
||
|
|
<div className="header-map">
|
||
|
|
<MiniMapaSvg provinciaNombre={data.provinciaNombre} fillColor={colorGanador} />
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div className="card-body">
|
||
|
|
{data.resultados.map(res => (
|
||
|
|
<div key={res.agrupacionId} className="candidato-row">
|
||
|
|
<ImageWithFallback src={res.fotoUrl ?? undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={res.nombreCandidato ?? res.nombreAgrupacion} className="candidato-foto" />
|
||
|
|
|
||
|
|
<div className="candidato-data">
|
||
|
|
{res.nombreCandidato && (
|
||
|
|
<span className="candidato-nombre">{res.nombreCandidato}</span>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<span className={`candidato-partido ${!res.nombreCandidato ? 'main-title' : ''}`}>
|
||
|
|
{res.nombreAgrupacion}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<div className="progress-bar-container">
|
||
|
|
<div className="progress-bar" style={{ width: `${res.porcentaje}%`, backgroundColor: res.color || '#ccc' }} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="candidato-stats">
|
||
|
|
<span className="stats-percent">{formatPercent(res.porcentaje)}</span>
|
||
|
|
<span className="stats-votos">{formatNumber(res.votos)} votos</span>
|
||
|
|
</div>
|
||
|
|
<div className="stats-bancas">
|
||
|
|
+{res.bancasObtenidas}
|
||
|
|
<span>Bancas</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<footer className="card-footer">
|
||
|
|
<div>
|
||
|
|
<span>Participación</span>
|
||
|
|
{/* Usamos los datos reales del estado de recuento */}
|
||
|
|
<strong>{formatPercent(data.estadoRecuento?.participacionPorcentaje ?? 0)}</strong>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>Mesas escrutadas</span>
|
||
|
|
<strong>{formatPercent(data.estadoRecuento?.mesasTotalizadasPorcentaje ?? 0)}</strong>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>Votos totales</span>
|
||
|
|
{/* Usamos el nuevo campo cantidadVotantes */}
|
||
|
|
<strong>{formatNumber(data.estadoRecuento?.cantidadVotantes ?? 0)}</strong>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|