// Button Component
const Button = ({ children, variant = 'primary', size = 'md', disabled, className = '', ...props }) => {
    const base = 'inline-flex items-center justify-center gap-2 font-medium rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
    
    const variants = {
        primary: 'bg-brand-500 text-white hover:bg-brand-600 focus:ring-brand-500',
        secondary: 'bg-white text-slate-700 border border-slate-300 hover:bg-slate-50 focus:ring-slate-400',
        ghost: 'text-slate-600 hover:bg-slate-100 focus:ring-slate-400',
        danger: 'bg-red-500 text-white hover:bg-red-600 focus:ring-red-500',
        success: 'bg-emerald-500 text-white hover:bg-emerald-600 focus:ring-emerald-500',
    };
    
    const sizes = {
        sm: 'px-3 py-1.5 text-sm',
        md: 'px-4 py-2 text-sm',
        lg: 'px-6 py-3 text-base'
    };
    
    return (
        <button 
            className={`${base} ${variants[variant]} ${sizes[size]} ${className}`} 
            disabled={disabled} 
            {...props}
        >
            {children}
        </button>
    );
};

window.Button = Button;