import React from 'react';

interface GlassButtonProps {
    children: React.ReactNode;
    variant?: 'default' | 'primary' | 'danger' | 'success';
    size?: 'sm' | 'md' | 'lg';
    className?: string;
    onClick?: () => void;
    disabled?: boolean;
}

export function GlassButton({
    children,
    variant = 'default',
    size = 'md',
    className = '',
    onClick,
    disabled = false
}: GlassButtonProps) {
    const variantClasses = {
        default: 'liquid-glass hover:bg-white/80',
        primary: 'bg-gradient-to-b from-[#1E90FF] to-[#007AFF] text-white shadow-lg',
        danger: 'bg-gradient-to-b from-[#FF5147] to-[#FF3B30] text-white shadow-lg',
        success: 'bg-gradient-to-b from-[#3DD860] to-[#34C759] text-white shadow-lg'
    };

    const sizeClasses = {
        sm: 'px-3 py-1 text-[12px]',
        md: 'px-4 py-1.5 text-[13px]',
        lg: 'px-5 py-2 text-[14px]'
    };

    return (
        <button
            onClick={onClick}
            disabled={disabled}
            className={`
                ${variantClasses[variant]}
                ${sizeClasses[size]}
                rounded-[var(--radius-sm)]
                font-medium
                glass-press
                transition-all
                ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
                ${className}
            `}
        >
            {children}
        </button>
    );
}
