"use client";
import { useRouter, useSearchParams } from "next/navigation";

export default function Pagination1({ currentPage, totalPages, basePath }) {
  const router = useRouter();
  const searchParams = useSearchParams();

  const goToPage = (page) => {
    if (page < 1 || page > totalPages) return;
    const params = new URLSearchParams(searchParams.toString());
    params.set("page", page);
    router.push(`${basePath}?${params.toString()}`);
  };

  if (totalPages <= 1) return null;

  return (
    <div style={{ textAlign: 'center' }}>
      <ul className="pagination" style={{ display: 'inline-flex' }}>
        <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
          <a className="page-link" onClick={() => goToPage(currentPage - 1)}>
            Prev
          </a>
        </li>
        {[...Array(totalPages)].map((_, idx) => {
          const page = idx + 1;
          return (
            <li key={page} className={`page-item ${currentPage === page ? "active" : ""}`}>
              <a className="page-link" onClick={() => goToPage(page)}>{page}</a>
            </li>
          );
        })}
        <li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
          <a className="page-link" onClick={() => goToPage(currentPage + 1)}>
            Next
          </a>
        </li>
      </ul>
    </div>
  );
}