import React from 'react';
import { MapPin } from 'lucide-react';
import { Row } from 'react-bootstrap';
import { CampoInformativo } from './CampoInformativo';
import { SubseccionFormulario } from './SubseccionFormulario';

export interface DatosDireccion {
    direccion: string;
    escalera?: string;
    planta?: string;
    puerta?: string;
    codigoPostal: string;
    localidad: string;
    provincia: string;
}

export interface SeccionDireccionProps {
    datos: DatosDireccion;
    prefijoId: string;
    errores?: Partial<Record<keyof DatosDireccion | 'codigoPostal', string>>;
    mostrarErrores?: boolean;
}

export const SeccionDireccion: React.FC<SeccionDireccionProps> = ({
    datos,
    prefijoId,
    errores = {},
    mostrarErrores = false,
}) => {
    const mostrarError = (clave: keyof typeof errores): boolean =>
        mostrarErrores && !!errores[clave];

    return (
        <SubseccionFormulario titulo="Dirección" icono={<MapPin size={16} aria-hidden />}>
            <Row className="g-3">
                <CampoInformativo
                    id={`${prefijoId}-direccion`}
                    etiqueta="Dirección"
                    valor={datos.direccion}
                    colProps={{ xs: 12 }}
                    esInvalido={mostrarError('direccion')}
                    mensajeError={errores.direccion}
                />
                <CampoInformativo
                    id={`${prefijoId}-escalera`}
                    etiqueta="Escalera"
                    valor={datos.escalera}
                    colProps={{ xs: 6, md: 2 }}
                />
                <CampoInformativo
                    id={`${prefijoId}-planta`}
                    etiqueta="Planta"
                    valor={datos.planta}
                    colProps={{ xs: 6, md: 2 }}
                />
                <CampoInformativo
                    id={`${prefijoId}-puerta`}
                    etiqueta="Puerta"
                    valor={datos.puerta}
                    colProps={{ xs: 6, md: 2 }}
                />
                <CampoInformativo
                    id={`${prefijoId}-codigo-postal`}
                    etiqueta="Código Postal"
                    valor={datos.codigoPostal}
                    colProps={{ xs: 6, md: 2 }}
                    esInvalido={mostrarError('codigoPostal')}
                    mensajeError={errores.codigoPostal}
                />
                <CampoInformativo
                    id={`${prefijoId}-localidad`}
                    etiqueta="Localidad"
                    valor={datos.localidad}
                    colProps={{ xs: 12, md: 4 }}
                    esInvalido={mostrarError('localidad')}
                    mensajeError={errores.localidad}
                />
                <CampoInformativo
                    id={`${prefijoId}-provincia`}
                    etiqueta="Provincia"
                    valor={datos.provincia}
                    colProps={{ xs: 12, md: 4 }}
                    esInvalido={mostrarError('provincia')}
                    mensajeError={errores.provincia}
                />
            </Row>
        </SubseccionFormulario>
    );
};