import React from 'react'

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
  size?: 'sm' | 'md' | 'lg'
  isLoading?: boolean
  children: React.ReactNode
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = 'primary', size = 'md', isLoading = false, className = '', children, disabled, ...props }, ref) => {
    const baseStyles = 'inline-flex items-center justify-center font-semibold tracking-wide border align-middle duration-500 text-center rounded-md'
    
    const variantStyles = {
      primary: 'bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white',
      secondary: 'bg-gray-600 hover:bg-gray-700 border-gray-600 hover:border-gray-700 text-white',
      outline: 'bg-transparent hover:bg-indigo-600 border-indigo-600 text-indigo-600 hover:text-white',
      ghost: 'bg-transparent hover:bg-gray-50 dark:hover:bg-gray-800 border-transparent text-gray-700 dark:text-gray-300',
      danger: 'bg-red-600 hover:bg-red-700 border-red-600 hover:border-red-700 text-white',
    }
    
    const sizeStyles = {
      sm: 'px-3 py-1 text-sm h-8',
      md: 'px-5 py-2 text-base h-10',
      lg: 'px-6 py-3 text-lg h-12',
    }
    
    return (
      <button
        ref={ref}
        className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className} ${disabled || isLoading ? 'opacity-60 cursor-not-allowed' : ''}`}
        disabled={disabled || isLoading}
        {...props}
      >
        {isLoading && (
          <svg className="animate-spin -ml-1 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
        )}
        {children}
      </button>
    )
  }
)

Button.displayName = 'Button'
