import { FC } from 'react';
import prev from '@/../public/images/blogs/arrow-prev.svg';
import next from '@/../public/images/blogs/arrow-next.svg';
import classNames from 'classnames';
import Image from 'next/image';

// ==========================================================
type PaginationProps = {
  className?: string;
  totalPages: number;
  currentPage: number;
  onPageChange?: (page: number) => void;
};
// ==========================================================

const Pagination: FC<PaginationProps> = ({ className, totalPages, currentPage, onPageChange }) => {
  const handlePageChange = (page: number) => {
    if (onPageChange) {
      onPageChange(page);
    }
  };

  return (
    <nav className={`d-flex justify-content-start ${className}`} aria-label="pagination">
      <ul className={`pagination pagination-alt`}>
        <li>
          <button
            onClick={() => {
              if (currentPage > 1) {
                handlePageChange(currentPage - 1);
              }
            }}
            className="tw-rounded-l-lg tw-h-10 tw-w-10 tw-border tw-border-light-gray tw-font-inter tw-font-semibold tw-text-sm hover:tw-text-main-color"
          >
            <Image src={prev} alt="prev" className="mx-auto" />
          </button>
        </li>
        {Array.from({ length: totalPages }, (_, i) => i + 1).map((item) => (
          <li className={` ${item === currentPage ? 'active' : ''}`} key={item}>
            <button
              className={classNames(
                { 'tw-text-main-color': item === currentPage },
                { 'tw-text-dark-gray': item !== currentPage },
                'tw-h-10 tw-w-10 tw-border tw-border-light-gray tw-font-ibm tw-font-semibold tw-text-sm hover:tw-text-main-color'
              )}
              onClick={() => handlePageChange(item)}
            >
              {item}
            </button>
          </li>
        ))}
        <li>
          <button
            onClick={() => {
              if (currentPage < totalPages) {
                handlePageChange(currentPage + 1);
              }
            }}
            className="tw-rounded-r-lg tw-h-10 tw-w-10 tw-border tw-border-light-gray tw-font-inter tw-font-semibold tw-text-sm hover:tw-text-main-color"
          >
            <Image src={next} alt="next" className="mx-auto" />
          </button>
        </li>
      </ul>
    </nav>
  );
};

export default Pagination;