// Form Section Component
const FormSection = ({ section, data, onChange, disabled, crifMode, crifOnly }) => {
    // Show CRIF-only sections when either crifMode or crifOnly is enabled
    if (section.crifOnly && !crifMode && !crifOnly) return null;

    return (
        <div className="space-y-4">
            <div className="flex items-center gap-2">
                <span className="text-lg">{section.icon}</span>
                <h4 className="font-semibold text-slate-900">{section.title}</h4>
                {section.required && <Badge variant="error">Obbligatorio</Badge>}
                {section.crifOnly && (crifMode || crifOnly) && (
                    <Badge variant={crifOnly ? 'success' : 'brand'}>{crifOnly ? 'Solo CRIF' : 'CRIF'}</Badge>
                )}
            </div>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {section.fields.map(field => (
                    field.type === 'select' ? (
                        <Select
                            key={field.key}
                            label={field.label}
                            required={field.required}
                            options={field.options}
                            value={data[field.key] || ''}
                            onChange={e => onChange(field.key, e.target.value)}
                            disabled={disabled}
                        />
                    ) : (
                        <Input
                            key={field.key}
                            label={field.label}
                            required={field.required}
                            placeholder={field.placeholder || field.label}
                            value={data[field.key] || ''}
                            onChange={e => onChange(field.key, e.target.value)}
                            disabled={disabled}
                        />
                    )
                ))}
            </div>
        </div>
    );
};

window.FormSection = FormSection;