web/apps/scandic-web/components/MyPages/Pagination/index.tsx

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import styles from "./pagination.module.css"

import type {
  PaginationButtonProps,
  PaginationProps,
} from "@/types/components/myPages/pagination"

function PaginationButton({
  children,
  isActive,
  handleClick,
  disabled,
}: React.PropsWithChildren<PaginationButtonProps>) {
  return (
    <button
      type="button"
      disabled={disabled}
      onClick={handleClick}
      className={`${styles.paginationButton} ${isActive ? styles.paginationButtonActive : ""}`}
    >
      {children}
    </button>
  )
}

export default function Pagination({
  pageCount,
  isFetching,
  handlePageChange,
  currentPage,
}: PaginationProps) {
  const isOnFirstPage = currentPage === 1
  const isOnLastPage = currentPage === pageCount
  return (
    <div className={styles.pagination}>
      <PaginationButton
        disabled={isFetching || isOnFirstPage}
        handleClick={() => {
          handlePageChange(currentPage - 1)
        }}
      >
        <MaterialIcon
          icon="chevron_left"
          size={20}
          className={styles.chevronLeft}
        />
      </PaginationButton>
      {[...Array(pageCount)].map((_, idx) => (
        <PaginationButton
          isActive={currentPage === idx + 1}
          disabled={isFetching || currentPage === idx + 1}
          key={idx}
          handleClick={() => {
            handlePageChange(idx + 1)
          }}
        >
          {idx + 1}
        </PaginationButton>
      ))}
      <PaginationButton
        disabled={isFetching || isOnLastPage}
        handleClick={() => {
          handlePageChange(currentPage + 1)
        }}
      >
        <MaterialIcon icon="chevron_right" size={20} />
      </PaginationButton>
    </div>
  )
}