import Pagination from "react-bootstrap/Pagination";

const ListPagination = (props) => {
  const { totalPages, page, setPage } = props;

  const handlePaginationItemClick = (event) => {
    const targetPage = Number(event.currentTarget.dataset.page);
    if (!isNaN(targetPage)) {
      setPage(targetPage);
    }
  };

  return (
    <Pagination className="justify-content-end">
      {page !== 1 ? <Pagination.Prev data-page={page - 1} onClick={handlePaginationItemClick}/> : null}
      {Array.from({ length: totalPages }, (v, i) => i + 1).map(n => (
        <Pagination.Item key={`page${n}`} active={n === page} data-page={n} onClick={handlePaginationItemClick}>{n}</Pagination.Item>
      ))}
      {page !== totalPages ? <Pagination.Next data-page={page + 1} onClick={handlePaginationItemClick}/> : null}
    </Pagination>
  );
};

export default ListPagination;