"use client";
import { ChevronLeft, ChevronRight } from "lucide-react";

type PaginationProps = {
  page: number;
  pageCount: number;
  onPageChange: (page: number) => void;
};

const Pagination = ({ page, pageCount, onPageChange }: PaginationProps) => {
  if (pageCount <= 1) return null;

  const buttons = Array.from({ length: pageCount }, (_, i) => i + 1);

  return (
    <div className="flex items-center gap-2">
      <button
        disabled={page === 1}
        onClick={() => onPageChange(page - 1)}
        className="p-2 disabled:opacity-40"
      >
        <ChevronLeft size={18} />
      </button>

      {buttons.map((p) => (
        <button
          key={p}
          onClick={() => onPageChange(p)}
          className={`px-3 py-1 rounded-md text-sm ${
            p === page
              ? "bg-main-color text-white"
              : "bg-[#f3f3f3] hover:bg-[#e7e7e7]"
          }`}
        >
          {p}
        </button>
      ))}

      <button
        disabled={page === pageCount}
        onClick={() => onPageChange(page + 1)}
        className="p-2 disabled:opacity-40"
      >
        <ChevronRight size={18} />
      </button>
    </div>
  );
};

export default Pagination;