import { Badge } from '@/components/ui/badge';
import { codigoRegistroFields } from '../lib/codigoInventario';
import type { Registro } from '../types';
import { InputCode } from './InputCode';

type CodigoRegistroProps = {
    registro: Registro;
};

export function CodigoRegistro({ registro }: CodigoRegistroProps) {
    return (
        <section className="grid gap-4 rounded-lg border border-dashed bg-muted/30 p-4">
            <div className="flex items-center justify-between gap-3">
                <p className="text-sm font-medium text-muted-foreground">
                    Codigo Catastral de la ficha de registro
                </p>
                <Badge variant="secondary">Solo lectura</Badge>
            </div>

            <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
                {codigoRegistroFields.map((field) => (
                    <InputCode
                        key={field.key}
                        label={field.label}
                        value={String(registro[field.key] ?? '')}
                        digits={field.digits}
                        mode={field.mode}
                        readOnly
                    />
                ))}
            </div>
        </section>
    );
}