// src/components/common/Pagination.jsx
import React from "react";
import { FiChevronLeft, FiChevronRight } from "react-icons/fi";

const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  if (totalPages <= 1) return null;

  const pageNumbers = [];
  for (let i = 1; i <= totalPages; i++) {
    pageNumbers.push(i);
  }

  const handlePrevious = () => currentPage > 1 && onPageChange(currentPage - 1);
  const handleNext = () => currentPage < totalPages && onPageChange(currentPage + 1);

  return (
    <div className="flex items-center justify-end mt-6 space-x-2">
      {/* Previous Button */}
      <button
        onClick={handlePrevious}
        disabled={currentPage === 1}
        className={`flex items-center justify-center px-3 py-2 rounded-full border transition 
          ${currentPage === 1
            ? "text-gray-400 border-gray-300 cursor-not-allowed"
            : "text-blue-600 border-blue-600 hover:bg-blue-50 hover:text-blue-700"
          }`}
      >
        <FiChevronLeft size={18} />
      </button>

      {/* Page Numbers */}
      {pageNumbers.map((num) => (
        <button
          key={num}
          onClick={() => onPageChange(num)}
          className={`px-4 py-2 rounded-full border font-medium transition
            ${num === currentPage
              ? "bg-blue-600 text-white border-blue-600 shadow-md"
              : "text-gray-700 border-gray-300 hover:bg-gray-100"
            }`}
        >
          {num}
        </button>
      ))}

      {/* Next Button */}
      <button
        onClick={handleNext}
        disabled={currentPage === totalPages}
        className={`flex items-center justify-center px-3 py-2 rounded-full border transition
          ${currentPage === totalPages
            ? "text-gray-400 border-gray-300 cursor-not-allowed"
            : "text-blue-600 border-blue-600 hover:bg-blue-50 hover:text-blue-700"
          }`}
      >
        <FiChevronRight size={18} />
      </button>
    </div>
  );
};

export default Pagination;
