import React from 'react';

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

export const Button: React.FC<ButtonProps> = ({
  children,
  variant = 'primary',
  size = 'md',
  loading = false,
  disabled,
  className = '',
  ...props
}) => {
  const sizeStyles = {
    sm: 'px-3.5 py-2 text-xs min-h-[40px]',
    md: 'px-4 py-2.5 text-sm min-h-[46px]',
    lg: 'px-6 py-3 text-base min-h-[52px]',
  }[size];

  const variantStyles = {
    primary:
      'bg-d11-red hover:bg-d11-red-dark text-white font-bold shadow-sm shadow-d11-red/20 active:scale-[0.98]',
    secondary:
      'bg-white hover:bg-gray-50 text-d11-ink border border-gray-200 font-bold active:scale-[0.98]',
    outline:
      'bg-transparent hover:bg-d11-soft text-d11-red border border-d11-red/80 font-bold active:scale-[0.98]',
    danger: 'bg-d11-red hover:bg-d11-red-dark text-white font-bold active:scale-[0.98]',
    amber: 'bg-amber-500 hover:bg-amber-600 text-white font-bold active:scale-[0.98]',
    ghost: 'bg-transparent hover:bg-gray-100 text-gray-700 font-semibold',
  }[variant];

  return (
    <button
      disabled={disabled || loading}
      className={`inline-flex cursor-pointer items-center justify-center rounded-xl transition focus:outline-none focus-visible:ring-2 focus-visible:ring-d11-red/40 disabled:cursor-not-allowed disabled:opacity-50 ${sizeStyles} ${variantStyles} ${className}`}
      {...props}
    >
      {loading ? (
        <span className="flex items-center gap-2">
          <svg className="h-4 w-4 animate-spin text-current" fill="none" viewBox="0 0 24 24" aria-hidden>
            <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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            />
          </svg>
          Processing…
        </span>
      ) : (
        children
      )}
    </button>
  );
};