import React from 'react';
import { Link } from '@remix-run/react';

type ButtonType = 'primary' | 'default' | 'danger';
type ButtonSize = 'small' | 'medium' | 'large';

interface ButtonProps {
  children: React.ReactNode;
  type?: ButtonType;
  size?: ButtonSize;
  to?: string;
  icon?: string;
  loading?: boolean;
  disabled?: boolean;
  className?: string;
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
}

export function Button({
  children,
  type = 'default',
  size = 'medium',
  to,
  icon,
  loading = false,
  disabled = false,
  className = '',
  onClick,
  ...rest
}: ButtonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>) {
  const baseClasses = 'ant-btn';
  
  const typeClasses = {
    primary: 'ant-btn-primary',
    default: 'ant-btn-default',
    danger: 'ant-btn-danger'
  };
  
  const sizeClasses = {
    small: 'ant-btn-sm',
    medium: '',
    large: 'text-base px-5 py-2.5'
  };
  
  const classes = [
    baseClasses,
    typeClasses[type],
    sizeClasses[size],
    (disabled || loading) ? 'opacity-50 cursor-not-allowed' : '',
    className
  ].filter(Boolean).join(' ');

  // 显示的图标：loading 时显示加载图标，否则显示传入的图标
  const displayIcon = loading ? 'ri-loader-4-line animate-spin' : icon;

  if (to) {
    return (
      <Link
        to={to}
        className={classes}
        {...(rest as any)}
      >
        {displayIcon && <i className={`${displayIcon} mr-1.5`}></i>}
        {children}
      </Link>
    );
  }

  return (
    <button
      className={classes}
      disabled={disabled || loading}
      onClick={onClick}
      {...rest}
    >
      {displayIcon && <i className={`${displayIcon} mr-1.5`}></i>}
      {children}
    </button>
  );
}