import React from 'react';
import { Form } from 'react-bootstrap';
import unipuntoStyles from '../../../Contratos/UniClienteUniPunto/css/UniClienteUniPunto.module.css';

export interface SipsCampoInformativoProps {
    id: string;
    etiqueta: string;
    valor: string;
    valorVacio?: string;
}

const SipsCampoInformativo: React.FC<SipsCampoInformativoProps> = ({
    id,
    etiqueta,
    valor,
    valorVacio = '—',
}) => {
    const displayValue = valor === '' ? valorVacio : valor;

    return (
        <div role="group" aria-labelledby={`${id}-label`}>
            <Form.Label
                id={`${id}-label`}
                htmlFor={id}
                className={`form-label fw-medium ${unipuntoStyles.etiquetaInformativa}`}
            >
                {etiqueta}
            </Form.Label>
            <Form.Control
                id={id}
                readOnly
                tabIndex={0}
                aria-readonly="true"
                aria-label={`${etiqueta}, solo lectura`}
                className={`form-control-sm ${unipuntoStyles.campoInformativo}`}
                value={displayValue}
            />
        </div>
    );
};

export default SipsCampoInformativo;