import { useState } from 'react';
import { IconRefresh } from '@tabler/icons-react';

/**
 * RetryButton - кнопка для повторной попытки с индикацией загрузки
 */
function RetryButton({ 
  onRetry, 
  loading: externalLoading,
  disabled,
  className = 'btn btn-primary',
  children = 'Повторить',
  showIcon = true,
  ...props 
}) {
  const [internalLoading, setInternalLoading] = useState(false);
  const loading = externalLoading !== undefined ? externalLoading : internalLoading;

  const handleClick = async () => {
    if (loading || disabled) return;
    
    try {
      setInternalLoading(true);
      await onRetry();
    } finally {
      setInternalLoading(false);
    }
  };

  return (
    <button
      type="button"
      className={`${className}${loading ? ' btn-loading' : ''}`}
      disabled={disabled || loading}
      onClick={handleClick}
      {...props}
    >
      {showIcon && !loading && <IconRefresh className="icon" />}
      {children}
    </button>
  );
}

export default RetryButton;