import { ChevronRightIcon } from "@/components/Icons"

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

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

export default function Pagination({
  pageCount,
  isFetching,
  handlePageChange,
  currentPage,
}: {
  pageCount: number
  isFetching: boolean
  handlePageChange: (page: number) => void
  currentPage: number
}) {
  const isOnFirstPage = currentPage === 1
  const isOnLastPage = currentPage === pageCount
  return (
    <div className={styles.pagination}>
      <PaginationButton
        disabled={isFetching || isOnFirstPage}
        handleClick={() => {
          handlePageChange(currentPage - 1)
        }}
      >
        <ChevronRightIcon 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)
        }}
      >
        <ChevronRightIcon />
      </PaginationButton>
    </div>
  )
}