// src/components/common/DiputadosNacionalesLayout.tsx import React from 'react'; import type { PartidoComposicionNacional } from '../../apiService'; // --- Interfaces Actualizadas --- interface DiputadosNacionalesLayoutProps { partyData: PartidoComposicionNacional[]; size?: number; presidenteBancada?: { color: string | null } | null; // <-- Nueva Prop } const PRESIDENTE_SEAT_INDEX = 0; // El escaño 'seat-0' es el del presidente export const DiputadosNacionalesLayout: React.FC = ({ partyData, size = 800, presidenteBancada, // <-- Recibimos la nueva prop }) => { // --- ARRAY DE 257 ELEMENTOS ORDENADOS POR ID DE "seat-X" --- const seatElements = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ]; let seatIndex = 1; // Empezamos a contar desde 1, ya que el 0 es presidencial return ( {/* Renderizamos el escaño presidencial primero y por separado */} {presidenteBancada && React.cloneElement(seatElements[PRESIDENTE_SEAT_INDEX], { fill: presidenteBancada.color || '#A9A9A9', strokeWidth: 0.5, })} {partyData.map(partido => { // Por cada partido, creamos un array combinado de sus escaños const partySeats = [ ...Array(partido.bancasFijos).fill({ isNew: false }), ...Array(partido.bancasGanadas).fill({ isNew: true }) ]; return ( // Envolvemos todos los escaños de un partido en un {partySeats.map((seatInfo, i) => { // Si ya no hay más plantillas de escaños, no renderizamos nada if (seatIndex >= seatElements.length) return null; const template = seatElements[seatIndex]; seatIndex++; // Incrementamos el contador para el siguiente escaño // Clonamos la plantilla con el estilo apropiado return React.cloneElement(template, { key: `${partido.id}-${i}`, className: 'seat-circle', fill: partido.color || '#808080', fillOpacity: seatInfo.isNew ? 1 : 0.3, // Opacidad para bancas previas stroke: partido.color || '#808080', strokeWidth: 0.5, }); })} ); })} {/* Renderizamos los escaños vacíos sobrantes */} {seatIndex < seatElements.length && seatElements.slice(seatIndex).map((template, i) => React.cloneElement(template, { key: `empty-${i}`, fill: '#E0E0E0', stroke: '#ffffff', strokeWidth: 0.5 }) ) } ); };