import { useCallback } from 'react';
import type {
    Inventario172FilaData,
    SectionProps,
} from '@/types/fichas-inventario';
import { useSectionForm } from '../../hooks/use-section-form';
import { AmenazasVulnerabilidades } from './seccion17/AmenazasVulnerabilidades';

export function Section172({ data }: SectionProps) {
    const filas172 = (data.filas_17_2 ?? []) as Inventario172FilaData[];

    const { data: formData, setData } = useSectionForm('17', {
        filas_17_2: filas172,
    });

    const setFila172Value = useCallback(
        (index: number, fila: Inventario172FilaData) => {
            const currentFilas = Array.isArray(formData.filas_17_2)
                ? formData.filas_17_2
                : [];
            const updated = [...currentFilas];
            updated[index] = fila;
            setData('filas_17_2', updated);
        },
        [formData.filas_17_2, setData],
    );

    return (
        <div className="flex flex-col gap-4">
            <div>
                <p className="text-sm font-medium text-foreground">
                    17.2 Amenazas y Vulnerabilidades
                </p>
            </div>
            <AmenazasVulnerabilidades
                filas={formData.filas_17_2}
                onChange={setFila172Value}
            />
        </div>
    );
}