import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'gold' | 'outline' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  fullWidth?: boolean;
  isLoading?: boolean;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ children, variant = 'primary', size = 'md', fullWidth, isLoading, className = '', disabled, ...props }, ref) => {
    
    let btnClass = 'btn';
    
    // Variant
    if (variant === 'primary') btnClass += ' btn-primary';
    else if (variant === 'gold') btnClass += ' btn-gold';
    else if (variant === 'outline') btnClass += ' btn-outline';
    else if (variant === 'ghost') btnClass += ' btn-ghost';
    else if (variant === 'danger') btnClass += ' btn-danger';
    
    // Size
    if (size === 'sm') btnClass += ' btn-sm';
    else if (size === 'lg') btnClass += ' btn-lg';
    
    // Full width
    if (fullWidth) btnClass += ' btn-full';
    
    return (
      <button 
        ref={ref} 
        className={`${btnClass} ${className}`} 
        disabled={disabled || isLoading} 
        {...props}
      >
        {isLoading ? (
          <svg className="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" strokeDasharray="30" strokeLinecap="round" opacity="0.3"></circle>
            <path d="M12 2A10 10 0 0 1 22 12" stroke="currentColor" strokeWidth="4" strokeLinecap="round"></path>
          </svg>
        ) : children}
      </button>
    );
  }
);

Button.displayName = 'Button';