import { ReactNode, ButtonHTMLAttributes } from 'react';

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

export function Button({
  children,
  variant = 'primary',
  size = 'md',
  icon,
  loading = false,
  className = '',
  disabled,
  ...props
}: ButtonProps) {
  const baseStyles = `
    relative inline-flex items-center justify-center gap-2
    font-medium rounded-xl
    transition-all duration-300 ease-out
    disabled:opacity-40 disabled:cursor-not-allowed disabled:transform-none
    active:scale-[0.98]
    overflow-hidden
  `;

  const variants = {
    primary: `
      bg-gradient-to-r from-[var(--color-desire)] to-[var(--color-desire-glow)]
      text-white
      shadow-lg shadow-[var(--color-desire)]/25
      hover:shadow-xl hover:shadow-[var(--color-desire)]/30
      hover:brightness-110
      before:absolute before:inset-0 before:bg-white/10 before:opacity-0 before:transition-opacity
      hover:before:opacity-100
    `,
    secondary: `
      bg-[var(--color-surface-elevated)]
      text-white
      border border-[var(--glass-border)]
      hover:bg-[var(--color-surface-hover)]
      hover:border-[var(--color-text-muted)]/30
    `,
    ghost: `
      bg-transparent
      text-[var(--color-text-secondary)]
      hover:text-white
      hover:bg-[var(--color-surface-elevated)]
    `,
    danger: `
      bg-[var(--color-passed)]/10
      text-[var(--color-passed)]
      border border-[var(--color-passed)]/30
      hover:bg-[var(--color-passed)]/20
    `,
  };

  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-5 py-2.5 text-sm',
    lg: 'px-7 py-3.5 text-base',
  };

  return (
    <button
      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
      disabled={disabled || loading}
      {...props}
    >
      {loading ? (
        <>
          <svg
            className="animate-spin h-4 w-4"
            viewBox="0 0 24 24"
            fill="none"
          >
            <circle
              className="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              strokeWidth="3"
            />
            <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"
            />
          </svg>
          <span>Loading...</span>
        </>
      ) : (
        <>
          {icon && <span className="flex-shrink-0">{icon}</span>}
          {children}
        </>
      )}
    </button>
  );
}
