components/pagination.tsx

import { SpaceProps } from "@/utils/type";
import { MAX_ITEMS_PER_PAGE } from "./spaces";

export const Pagination = ({
  spaces,
  page,
  handleNextPage,
  handlePrevPage,
}: {
  spaces: SpaceProps[];
  page: number;
  handleNextPage: () => void;
  handlePrevPage: () => void;
}) => {
  const max_pages = Math.ceil(spaces.length / MAX_ITEMS_PER_PAGE);

  return (
    <footer className="flex justify-between max-w-2xl mx-auto my-auto w-full p-3 sticky items-center bottom-3 bg-white dark:bg-slate-950 dark:border-slate-800 shadow-lg shadow-black/5 border border-zinc-200 rounded-full z-[9999]">
      <button
        disabled={page === 0}
        className="flex items-center gap-2.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 rounded-full px-3 py-1.5 dark:hover:bg-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:!bg-transparent"
        onClick={handlePrevPage}
      >
        <span className="max-lg:hidden">←</span>
        <span>Previous</span>
      </button>
      <p className="text-gray-500/70">
        Page {page + 1} of {max_pages}
      </p>
      <button
        disabled={page === max_pages - 1}
        className="flex items-center gap-2.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 rounded-full px-3 py-1.5 dark:hover:bg-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:!bg-transparent"
        onClick={handleNextPage}
      >
        <span>Next</span>
        <span className="max-lg:hidden">→</span>
      </button>
    </footer>
  );
};