import React, { FC, useState } from "react";

interface PaginationProps {
  nPages: number;
  currentPage: number;
  setCurrentPage: (page: number) => void;
}

const Pagination: FC<PaginationProps> = ({
  nPages,
  currentPage,
  setCurrentPage,
}) => {
  const pageNumbers = Array.from({ length: nPages }, (_, i) => i + 1);

  return (
    <div className="flex w-auto">
      {pageNumbers.map((pgNumber) => (
        <div
          key={pgNumber}
          tabIndex={0}
          className={`hover:bg-blue-400 mx-2 focus:w-4 focus:mt-0.5 focus:px-4 focus:bg-blue-400 focus:h-2.5 rounded-full ${currentPage === pgNumber ? "bg-blue-500 w-4 h-2.5 mt-0.5 px-4": "bg-white w-3 h-3 hover:h-4 hover:w-4 "} `}
          onClick={() => setCurrentPage(pgNumber)}
        >
        </div>
      ))}
    </div>
  );
};

export default Pagination;