import React from 'react';

type Props = {
  page: number;
  total: number;
  onPrev: () => void;
  onNext: () => void;
  isChangingPage?: boolean;
};

const Pagination: React.FC<Props> = ({ page, total, onPrev, onNext, isChangingPage = false }) => {
  if (total <= 1) return null;
  
  return (
    <div className="flex flex-wrap justify-center sm:justify-end gap-2 items-center w-full py-2">
      <button
        onClick={onPrev}
        disabled={page <= 1 || isChangingPage}
        className="
          min-w-[90px] px-3 py-1.5 text-xs sm:text-sm border border-gray-300 rounded-md
          bg-white text-gray-700 hover:bg-gray-50
          transition-colors duration-200
          disabled:opacity-50 disabled:cursor-not-allowed
          disabled:hover:bg-white
          cursor-pointer
          flex items-center justify-center gap-1
        "
      >
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
        </svg>
        <span>{isChangingPage ? 'Carregando...' : 'Anterior'}</span>
      </button>
      <span className="px-3 py-1.5 text-xs sm:text-sm text-gray-700 font-medium bg-gray-100 rounded-md min-w-[70px] text-center">
        {page} / {total}
      </span>
      <button
        onClick={onNext}
        disabled={page >= total || isChangingPage}
        className="
          min-w-[90px] px-3 py-1.5 text-xs sm:text-sm border border-gray-300 rounded-md
          bg-white text-gray-700 hover:bg-gray-50
          transition-colors duration-200
          disabled:opacity-50 disabled:cursor-not-allowed
          disabled:hover:bg-white
          cursor-pointer
          flex items-center justify-center gap-1
        "
      >
        <span>{isChangingPage ? 'Carregando...' : 'Próxima'}</span>
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>
  );
};

export default Pagination;
