import { cn } from '@/lib/utils'
import { ButtonHTMLAttributes, forwardRef } from 'react'

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline'
  size?: 'sm' | 'md' | 'lg'
  loading?: boolean
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = 'primary', size = 'md', loading, children, disabled, ...props }, ref) => {
    const base = 'inline-flex items-center justify-center font-medium tracking-widest uppercase text-xs transition-all duration-200 disabled:opacity-40 disabled:pointer-events-none focus:outline-none'

    const variants = {
      primary:   'bg-[#C9A84C] hover:bg-[#E8C97A] text-black hover:shadow-[0_0_20px_rgba(201,168,76,0.35)]',
      secondary: 'bg-[#1a1a1a] text-[#C9A84C] border border-[#C9A84C]/30 hover:border-[#C9A84C] hover:bg-[#111]',
      outline:   'border border-[#C9A84C]/50 hover:border-[#C9A84C] text-[#C9A84C] hover:bg-[#C9A84C]/5',
      ghost:     'bg-transparent text-[#888] hover:text-[#C9A84C] hover:bg-white/5',
      danger:    'bg-red-900/20 text-red-400 border border-red-800/40 hover:bg-red-900/40 hover:border-red-600',
    }

    const sizes = {
      sm: 'text-[10px] px-3 py-1.5',
      md: 'px-5 py-2.5',
      lg: 'px-8 py-4 text-xs',
    }

    return (
      <button
        ref={ref}
        className={cn(base, variants[variant], sizes[size], className)}
        disabled={disabled || loading}
        {...props}
      >
        {loading && (
          <svg className="mr-2 h-3.5 w-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
          </svg>
        )}
        {children}
      </button>
    )
  }
)

Button.displayName = 'Button'