// src/features/legislativas/nacionales/components/PanelResultadosSkeleton.tsx
import styles from '../PanelNacional.module.css';

const SkeletonRow = () => (
  <div className={`${styles.partidoFila} ${styles.skeletonFila}`}>
    <div className={styles.skeletonLogo} />
    <div className={styles.partidoMainContent}>
      {/* Fila Superior (Nombre y Porcentaje) */}
      <div className={styles.partidoInfoWrapper}>
        <div className={styles.skeletonText} style={{ width: '70%' }} />
        <div className={styles.skeletonText} style={{ width: '50%', marginTop: '4px' }} />
      </div>
      <div className={styles.partidoStats}>
        <div className={styles.skeletonText} style={{ width: '80px' }} />
      </div>

      {/* --- CAMBIO: La barra ahora es más alta y no hay texto de votos debajo --- */}
      <div 
        className={styles.skeletonBar} 
        style={{ gridColumn: '1 / 3', height: '28px' }} 
      />
    </div>
  </div>
);

export const PanelResultadosSkeleton = () => (
  <div className={styles.panelResultadosSkeleton}>
    {[...Array(5)].map((_, i) => <SkeletonRow key={i} />)}
  </div>
);