import React from 'react';

interface PaginationProps {
    totalPages: number;
    currentPage: number;
    onPageChange: (page: number) => void;
  }

const Pagination: React.FC<PaginationProps> = ({ totalPages, currentPage, onPageChange }) => {
  const MAX_VISIBLE_PAGES = 5;

  const getVisiblePages = () => {
    const halfMaxVisiblePages = Math.floor(MAX_VISIBLE_PAGES / 2);

    if (currentPage <= halfMaxVisiblePages + 1) {
      return Array.from({ length: Math.min(MAX_VISIBLE_PAGES, totalPages) }, (_, i) => i + 1);
    } else if (currentPage >= totalPages - halfMaxVisiblePages) {
      return Array.from({ length: Math.min(MAX_VISIBLE_PAGES, totalPages) }, (_, i) => totalPages - MAX_VISIBLE_PAGES + i + 1);
    } else {
      return Array.from({ length: MAX_VISIBLE_PAGES }, (_, i) => currentPage - halfMaxVisiblePages + i);
    }
  };

  const renderEllipsis = () => (
    <span key="ellipsis" className="mx-2">
      ...
    </span>
  );

  const renderPageButton = (pageNumber:number) => (
    <button
      key={pageNumber}
      onClick={() => onPageChange(pageNumber)}
      className={`flex justify-center rounded-full ${
        currentPage === pageNumber
          ? 'bg-primary text-white'
          : 'bg-white-light text-dark hover:bg-primary hover:text-white dark:bg-[#191e3a] dark:text-white-light dark:hover:bg-primary'
      } px-3.5 py-2 font-semibold transition`}
    >
      {pageNumber}
    </button>
  );

  const renderPageNumbers = () => {
    const pageNumbers = [];

    if (totalPages <= MAX_VISIBLE_PAGES) {
      for (let i = 1; i <= totalPages; i++) {
        pageNumbers.push(renderPageButton(i));
      }
    } else {
      const visiblePages = getVisiblePages();

      pageNumbers.push(renderPageButton(1));

      if (visiblePages[0] > 2) {
        pageNumbers.push(renderEllipsis());
      }

      for (const pageNumber of visiblePages) {
        if (pageNumber > 1 && pageNumber < totalPages) {
          pageNumbers.push(renderPageButton(pageNumber));
        }
      }

      if (visiblePages[visiblePages.length - 1] < totalPages - 1) {
        pageNumbers.push(renderEllipsis());
      }

      pageNumbers.push(renderPageButton(totalPages));
    }

    return pageNumbers;
  };

  return <div className="flex">{renderPageNumbers()}</div>;
};

export default Pagination;