jsx

"use client";

import React, { useState } from "react";
import styles from "./pagination.module.scss";
import { SingleBlog } from "..";
import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";

export default function Pagination({ posts, blogPostPerPage }) {
  //const [currentPage, setCurrentPage] = useState(1);
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const currentPage = Number(searchParams.get("page")) || 1;

  const createPageURL = (pageNumber) => {
    const params = new URLSearchParams(searchParams);
    params.set("page", pageNumber.toString());
    return `${pathname}?${params.toString()}`;
  };

  const totalPages = Math.ceil(posts.length / blogPostPerPage); // 24/6 = 4
  const indexOfLastPost = currentPage * blogPostPerPage; // 1*6 = 6
  const indexOfFirstPost = indexOfLastPost - blogPostPerPage; //

  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost); //(1,6)
  const handleNextPage = () => {
    if (currentPage < totalPages) {
      const nextPage = currentPage + 1;
      //setCurrentPage(currentPage + 1);
      router.push(createPageURL(nextPage), { scroll: false });
    }
  };
  const handlePrevPage = () => {
    if (currentPage > 1) {
      const prevPage = currentPage - 1;
      router.push(createPageURL(prevPage), { scroll: false });
    }
  };

  const handlePageChange = (pageNumber) => {
    //setCurrentPage(pageNumber);
    createPageURL(pageNumber);
  };

  return (
    <div className={styles.pagination}>
      {/* Display the pictures for the current page */}
      <div className={styles.container}>
        {currentPosts.map((post, index) => (
          <SingleBlog
            key={post._id}
            id={post._id}
            slug={post.slug}
            title={post.title}
            image={post.image}
            date={post.date}
            tags={post.tags}
            estReadingTime={post.estReadingTime}
          />
        ))}
      </div>

      {/* Pagination controls */}
      <div className={styles.pagination_controls}>
        <button
          onClick={handlePrevPage}
          href={createPageURL(currentPage - 1)}
          disabled={currentPage === 1}
          className={styles.btn}
          // className={`${styles.btn} ${
          //   currentPage === 1 ? `${styles.disabled}` : ""
          // }`}
        >
          <span>
            <FaChevronLeft />
          </span>
        </button>

        {/* <span>{`Page ${currentPage} of ${totalPages}`}</span> */}
        <div className={styles.pagination_btns}>
          {Array.from({ length: totalPages }, (_, index) => (
            <button
              key={index}
              // href={createPageURL(index + 1)}
              onClick={() =>
                router.push(createPageURL(index + 1), { scroll: false })
              }
              className={`${styles.pagination_btn} ${
                currentPage === index + 1 ? `${styles.active}` : ""
              }`}
            >
              {index + 1}
            </button>
          ))}
        </div>
        <button
          onClick={handleNextPage}
          //href={createPageURL(currentPage + 1)}
          disabled={currentPage === totalPages}
          className={styles.btn}
          // className={`${styles.btn} ${
          //   currentPage === totalPages ? `${styles.disabled}` : ""
          // }`}
        >
          <span>
            <FaChevronRight />
          </span>
        </button>
      </div>
    </div>
  );
}