import React from 'react';
import { Row } from 'react-bootstrap';
import { CampoInformativo } from './CampoInformativo';
import styles from '../css/UniClienteUniPunto.module.css';

const CLAVES_POTENCIA = [
    'potencia1',
    'potencia2',
    'potencia3',
    'potencia4',
    'potencia5',
    'potencia6',
] as const;

export type ClavesPotencia = (typeof CLAVES_POTENCIA)[number];

export interface RejillaPotenciasProps {
    potencias: Partial<Record<ClavesPotencia, string | number | undefined>>;
    prefijoId?: string;
}

export const RejillaPotencias: React.FC<RejillaPotenciasProps> = ({
    potencias,
    prefijoId = 'potencia',
}) => {
    return (
        <Row className={`g-3 ${styles.rejillaPotencias}`}>
            {CLAVES_POTENCIA.map((clave, indice) => (
                <CampoInformativo
                    key={clave}
                    id={`${prefijoId}-p${indice + 1}`}
                    etiqueta={`P${indice + 1} (kW)`}
                    valor={potencias[clave]}
                    colProps={{ xs: 4, md: 2 }}
                />
            ))}
        </Row>
    );
};