import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/solid'
import React, { useState } from 'react'
import styles from './blog.module.scss'
interface PaginateProps {
  nPages: number
  currentPage: number
  setCurrentPage: (page: number) => void
}

const Paginate: React.FC<PaginateProps> = ({
  nPages,
  currentPage,
  setCurrentPage,
}) => {
  const [hoveredPage, setHoveredPage] = useState<number | null>(null)
  const pageNumbers = Array.from({ length: nPages }, (_, i) => i + 1)

  const handleMouseEnter = (pageNumber: number) => {
    setHoveredPage(pageNumber)
  }

  const handleMouseLeave = () => {
    setHoveredPage(null)
  }

  const nextPage = () => {
    if (currentPage + 1 <= nPages) {
      setCurrentPage(currentPage + 1)
      //  fetchData(currentPage + 1)
    }
  }

  const changePage = (pages: number) => {
    setCurrentPage(pages)
    //   fetchData(pages)
  }

  const prevPage = () => {
    if (currentPage - 1 >= 1) {
      setCurrentPage(currentPage - 1)
      //   fetchData(currentPage - 1)
    }
  }

  return (
    <>
      {nPages > 1 ? (
        <div>
          <div className="w-auto flex mt-2 sm:mt-0 py-2 px-2 sm:px-10 justify-between items-center bg-blue-50 rounded-md">
            <div
              className={`px-1.5 py-1 mt-0.5 rounded-lg ${
                currentPage === 1 ? 'cursor-not-allowed' : 'cursor-pointer'
              } ${currentPage === 1 ? '' : 'bg-blue-400'}`}
              onClick={prevPage}
            >
              <ArrowLeftIcon className="block h-3 w-3" aria-hidden="true" />
            </div>
            { pageNumbers.map((pgNumber) => (
              <p
                key={pgNumber}
                className={styles.page}
                onClick={() => changePage(pgNumber)}
                onMouseEnter={() => handleMouseEnter(pgNumber)}
                onMouseLeave={handleMouseLeave}
                style={{
                  backgroundColor:
                    currentPage === pgNumber
                      ? 'rgb(136, 154, 233)'
                      : hoveredPage === pgNumber
                      ? '#ddd'
                      : '',
                  color: currentPage === pgNumber ? 'white' : 'black',
                  cursor: currentPage === pgNumber ? '' : 'pointer',
                  float: 'left',
                  padding: '2px 8px',
                  marginLeft: '8px',
                  marginRight: '8px',
                  textDecoration: 'none',
                  borderRadius: '5px',
                }}
              >
                {pgNumber}
              </p>
            ))}
            <div
              className={`px-1.5 py-1 mt-0.5 rounded-lg ${
                currentPage === nPages ? 'cursor-not-allowed' : 'cursor-pointer'
              } no-underline ${currentPage === nPages ? '' : 'bg-blue-400'}`}
              onClick={nextPage}
            >
              <ArrowRightIcon className="block h-3 w-3" aria-hidden="true" />
            </div>
          </div>
        </div>
      ) : (
        ''
      )}
    </>
  )
}

export default Paginate