import React, { useId } from 'react';
import unipuntoStyles from '../../../Contratos/UniClienteUniPunto/css/UniClienteUniPunto.module.css';

export interface SipsSubseccionDetalleProps {
    titulo: string;
    icono?: React.ReactNode;
    children: React.ReactNode;
    className?: string;
    sectionId?: string;
}

const SipsSubseccionDetalle: React.FC<SipsSubseccionDetalleProps> = ({
    titulo,
    icono,
    children,
    className = '',
    sectionId,
}) => {
    const generatedId = useId().replace(/:/g, '');
    const headingId = sectionId ? `${sectionId}-heading` : `sips-seccion-${generatedId}`;

    return (
        <section
            id={sectionId}
            className={`${unipuntoStyles.subseccion} ${className}`.trim()}
            aria-labelledby={headingId}
        >
            <h3
                id={headingId}
                className={`h6 text-muted mb-3 fw-semibold d-flex align-items-center ${unipuntoStyles.subseccionTitulo}`}
            >
                {icono ? <span className="me-2 d-inline-flex">{icono}</span> : null}
                {titulo}
            </h3>
            {children}
        </section>
    );
};

export default SipsSubseccionDetalle;