import React from 'react';
import styles from '../../Sips.module.css';

interface Props {
    badges: React.ReactNode;
    search?: React.ReactNode;
    tabs: React.ReactNode;
    datosPanel: React.ReactNode | null;
    consumoPanel: React.ReactNode | null;
}

/**
 * Orden DOM: badges → búsqueda → panel datos → pestañas → panel consumo.
 * CSS grid mantiene las pestañas visualmente arriba del contenido.
 */
const SipsPanelLayout: React.FC<Props> = ({ badges, search, tabs, datosPanel, consumoPanel }) => (
    <div className={styles.sipsPanelGrid}>
        <div className={styles.sipsPanelBadges}>{badges}</div>
        {search ? <div className={styles.sipsPanelSearch}>{search}</div> : null}
        {datosPanel ? <div className={styles.sipsPanelContent}>{datosPanel}</div> : null}
        <div className={styles.sipsPanelTabs}>{tabs}</div>
        {consumoPanel ? <div className={styles.sipsPanelContent}>{consumoPanel}</div> : null}
    </div>
);

export default SipsPanelLayout;