import React from 'react';
import { useThrottledRequestWithLoading } from '../hooks/useThrottledRequest';

interface ThrottledButtonProps {
  onClick: () => Promise<any>;
  children: React.ReactNode;
  delay?: number;
  disabled?: boolean;
  className?: string;
}

export const ThrottledButton: React.FC<ThrottledButtonProps> = ({
  onClick,
  children,
  delay = 1000,
  disabled = false,
  className = ''
}) => {
  const { throttledRequest, loading } = useThrottledRequestWithLoading(onClick, delay);
  
  return (
    <button
      onClick={throttledRequest}
      disabled={disabled || loading}
      className={`px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed ${className}`}
    >
      {loading ? '处理中...' : children}
    </button>
  );
};