import { Head } from '@inertiajs/react';
import SectionLayout from './layouts/section';
import { getSeccion, type SeccionPageProps } from './sections';

export default function FichaInventarioSeccion({
    ficha,
    seccion,
}: SeccionPageProps) {
    const meta = getSeccion(seccion);
    const Componente = meta.Component;
    const numero = seccion.padStart(2, '0');
    const wideSection =
        seccion === '12' || seccion === '13' || seccion === '16.1' || seccion === '16.2' || seccion === '17.3' || seccion === '18.1' || seccion === '18.2' || seccion === 'anexos';

    return (
        <>
            <Head
                title={`Sección ${seccion} — ${ficha.denominacion ?? 'Inventario'}`}
            />

            <div className={wideSection ? 'mx-auto max-w-7xl' : 'mx-auto max-w-4xl'}>
                <div className="mb-6">
                    <h2 className="flex items-center gap-4 text-[0.75rem] font-bold tracking-[0.2em] text-foreground uppercase">
                        <span>
                            {numero}. {meta.label}
                        </span>
                        <span className="h-px grow bg-border" />
                    </h2>
                </div>

                <div className="space-y-6">
                    {Componente ? (
                        <Componente fichaId={ficha.id} />
                    ) : (
                        <div className="rounded-lg border border-dashed bg-muted/30 p-8 text-center">
                            <p className="text-sm text-muted-foreground">
                                {meta.label} — sección pendiente de implementar.
                            </p>
                        </div>
                    )}
                </div>
            </div>
        </>
    );
}

FichaInventarioSeccion.layout = SectionLayout;
