import ReactPaginate from "react-paginate";
import { FC } from "react";

interface PaginationProps {
  pageCount: number;
  onPageChange: (selectedItem: { selected: number }) => void;
  currentPage: number;
}

const Pagination: FC<PaginationProps> = ({
  pageCount,
  onPageChange,
  currentPage,
}) => {
  if (pageCount <= 1) return null;

  return (
    <div className="mt-6 flex justify-center">
      <ReactPaginate
        pageCount={pageCount}
        forcePage={currentPage - 1}
        onPageChange={onPageChange}
        marginPagesDisplayed={1}
        pageRangeDisplayed={1}
        breakLabel="..."
        nextLabel="Next"
        previousLabel="Prev"
        containerClassName="flex items-center space-x-2"
        pageClassName="text-sm"
        pageLinkClassName="px-4 py-2 rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-primary500 hover:text-gray-200 dark:hover:bg-primary400 transition-colors duration-200 hover:border-primary500 dark:bg-darkbg dark:text-neutrals200 dark:border-darkborder max-[370px]:px-3"
        activeLinkClassName="!bg-primary500 !text-white !border-primary500 dark:!bg-primary400 dark:!border-primary400"
        previousClassName="text-sm"
        previousLinkClassName="px-4 py-2 rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-primary500 hover:text-gray-200 dark:hover:bg-primary400 transition-colors duration-200 hover:border-primary500 dark:bg-darkbg dark:text-neutrals200 dark:border-darkborder max-[370px]:px-3"
        nextClassName="text-sm"
        nextLinkClassName="px-4 py-2 rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-primary500 hover:text-gray-200 dark:hover:bg-primary400 transition-colors duration-200 hover:border-primary500 dark:bg-darkbg dark:text-neutrals200 dark:border-darkborder max-[370px]:px-3"
        breakClassName="px-3 py-2 text-gray-400 select-none"
        disabledClassName="opacity-50 cursor-not-allowed"
      />
    </div>
  );
};

export default Pagination;