/**
 * Reusable Button component.
 * Meets minimum 44×44px touch target requirement (Req 13.2).
 */

const variantClasses = {
  primary:
    'bg-primary text-white hover:bg-primary-600 active:bg-primary-700 focus-visible:ring-primary',
  secondary:
    'bg-secondary text-white hover:bg-secondary-700 active:bg-secondary-800 focus-visible:ring-secondary',
  outline:
    'border border-primary text-primary bg-transparent hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary',
  ghost:
    'bg-transparent text-secondary hover:bg-secondary-100 active:bg-secondary-200 focus-visible:ring-secondary',
};

const sizeClasses = {
  sm: 'px-3 text-sm min-h-[44px]',
  md: 'px-4 py-2 text-base min-h-[44px]',
  lg: 'px-6 py-3 text-lg min-h-[44px]',
};

/**
 * @param {{
 *   children: React.ReactNode,
 *   variant?: 'primary'|'secondary'|'outline'|'ghost',
 *   size?: 'sm'|'md'|'lg',
 *   disabled?: boolean,
 *   loading?: boolean,
 *   type?: string,
 *   onClick?: Function,
 *   className?: string,
 * }} props
 */
export default function Button({
  children,
  variant = 'primary',
  size = 'md',
  disabled = false,
  loading = false,
  type = 'button',
  onClick,
  className = '',
  ...rest
}) {
  const isDisabled = disabled || loading;

  return (
    <button
      type={type}
      onClick={onClick}
      disabled={isDisabled}
      aria-disabled={isDisabled}
      className={[
        'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors',
        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
        'disabled:cursor-not-allowed disabled:opacity-50',
        variantClasses[variant] ?? variantClasses.primary,
        sizeClasses[size] ?? sizeClasses.md,
        className,
      ]
        .filter(Boolean)
        .join(' ')}
      {...rest}
    >
      {loading && (
        <svg
          className="h-4 w-4 animate-spin"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <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>
  );
}