import { FC, Fragment } from "react";
import ReactPaginate, { ReactPaginateProps } from "react-paginate";
interface IProps {
  currentPage: number;
  totalPages: number;
  onPageChange: ReactPaginateProps["onPageChange"];
}
const Pagination: FC<IProps> = ({ totalPages, currentPage, onPageChange }) => {
  return (
    <Fragment>
      <ReactPaginate
        pageCount={totalPages}
        initialPage={currentPage}
        nextLabel=">"
        previousLabel="<"
        pageRangeDisplayed={5}
        activeClassName="flex justify-center rounded-md bg-primary p-1 font-medium !text-white hover:bg-opacity-90"
        onPageChange={(e) => {
          if (!onPageChange) return;
          window.scrollTo({ top: 0, behavior: "smooth" });
          onPageChange(e);
        }}
        className="flex w-full items-center justify-center text-sm text-gray-dark dark:text-white"
        nextClassName="flex justify-center rounded-md  p-1 font-medium text-gray-dark dark:text-white hover:bg-opacity-90"
        previousClassName="flex justify-center rounded-md  p-1 font-medium text-gray-dark dark:text-white hover:bg-opacity-90"
        pageClassName="flex justify-center h-fit rounded-md mx-2  p-1 text-gray-dark dark:text-white hover:bg-opacity-90"
      />
    </Fragment>
  );
};

export default Pagination;
