"use client";

export default function Pagination(props: {
  currentPage: number;
  totalPages: number;
  onPrev: () => void;
  onNext: () => void;
}) {
  const { currentPage, totalPages, onPrev, onNext } = props;

  return (
    <div className="mt-4 flex items-center justify-between text-xs text-zinc-400">
      <div>
        Page{" "}
        <span className="font-semibold text-zinc-200">{currentPage}</span>{" "}
        of{" "}
        <span className="font-semibold text-zinc-200">{totalPages}</span>
      </div>
      <div className="flex gap-2">
        <button
          type="button"
          onClick={onPrev}
          disabled={currentPage === 1}
          className="rounded border border-zinc-700 bg-zinc-900/70 px-3 py-1 hover:bg-zinc-800 disabled:opacity-40"
        >
          Previous
        </button>
        <button
          type="button"
          onClick={onNext}
          disabled={currentPage === totalPages}
          className="rounded border border-zinc-700 bg-zinc-900/70 px-3 py-1 hover:bg-zinc-800 disabled:opacity-40"
        >
          Next
        </button>
      </div>
    </div>
  );
}