// Select Component
const Select = ({ label, required, options = [], placeholder = 'Seleziona...', className = '', ...props }) => (
    <div className={className}>
        {label && (
            <label className="block text-sm font-medium text-slate-700 mb-1">
                {label}
                {required && <span className="text-red-500 ml-1">*</span>}
            </label>
        )}
        <select 
            className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500" 
            {...props}
        >
            <option value="">{placeholder}</option>
            {options.map(opt => <option key={opt} value={opt}>{opt}</option>)}
        </select>
    </div>
);

window.Select = Select;