import React from 'react';
import { ArrowPathIcon } from '@heroicons/react/24/outline';

type Props = {
  onClick: () => void;
  loading?: boolean;
};

const RefreshButton: React.FC<Props> = ({ onClick, loading }) => (
  <button
    onClick={onClick}
    disabled={loading}
    className="
      bg-gray-900 text-white px-4 py-2 rounded-md 
      hover:bg-gray-800 transition-colors duration-200
      inline-flex items-center h-10 gap-2
      disabled:opacity-50 disabled:cursor-not-allowed
      focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2
      cursor-pointer
    "
  >
    {loading ? (
      <svg className="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
        <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"></path>
      </svg>
    ) : (
      <ArrowPathIcon className="h-4 w-4" />
    )}
    Atualizar
  </button>
);

export default RefreshButton;
