import type { ReactNode } from "react";
import Link from "next/link";
import { cn } from "cn";

import { buttonVariants } from "@/components/ui/button";

type PaginationProps = {
  page: number;
  hasNext: boolean;
  hrefPage: (page: number) => string;
};

export function Pagination({ page, hasNext, hrefPage }: PaginationProps) {
  return (
    <div className="mt-4 flex items-center justify-between text-sm">
      <span className="text-muted-foreground">Halaman {page}</span>
      <div className="flex gap-2">
        <TombolHalaman href={page > 1 ? hrefPage(page - 1) : null}>
          Sebelumnya
        </TombolHalaman>
        <TombolHalaman href={hasNext ? hrefPage(page + 1) : null}>
          Berikutnya
        </TombolHalaman>
      </div>
    </div>
  );
}

function TombolHalaman({
  href,
  children,
}: {
  href: string | null;
  children: ReactNode;
}) {
  const className = buttonVariants({ variant: "outline", size: "sm" });

  if (!href) {
    return (
      <span className={cn(className, "pointer-events-none opacity-50")}>
        {children}
      </span>
    );
  }

  return (
    <Link href={href} className={className}>
      {children}
    </Link>
  );
}