// Input Component
const Input = ({ label, required, error, 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>
        )}
        <input 
            className={`w-full px-3 py-2 bg-white border rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 ${error ? 'border-red-300' : 'border-slate-300'}`} 
            {...props} 
        />
        {error && <p className="text-xs text-red-500 mt-1">{error}</p>}
    </div>
);

window.Input = Input;