import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export function PaginationLinks({
  page,
  totalPages,
  total,
  basePath,
  params,
}: {
  page: number;
  totalPages: number;
  total?: number;
  basePath: string;
  params?: Record<string, string | undefined>;
}) {
  function href(target: number) {
    const search = new URLSearchParams();
    for (const [key, value] of Object.entries(params ?? {})) {
      if (value) search.set(key, value);
    }
    if (target > 1) search.set("page", String(target));
    const query = search.toString();
    return query ? `${basePath}?${query}` : basePath;
  }

  const linkClass =
    "inline-flex h-9 items-center gap-1 rounded-lg border border-border bg-card px-3 text-sm font-medium transition-colors hover:bg-muted";
  const disabledClass =
    "inline-flex h-9 items-center gap-1 rounded-lg border border-border px-3 text-sm text-muted-foreground opacity-50";

  return (
    <div className="flex flex-col gap-3 border-t px-1 py-4 sm:flex-row sm:items-center sm:justify-between">
      <p className="text-xs text-muted-foreground">
        {typeof total === "number" ? `${total.toLocaleString("id-ID")} artikel · ` : ""}
        Halaman {page} dari {Math.max(1, totalPages)}
      </p>
      <div className="flex items-center gap-2">
        {page > 1 ? (
          <Link href={href(page - 1)} className={linkClass}>
            <ChevronLeft className="h-4 w-4" />
            Sebelumnya
          </Link>
        ) : (
          <span className={disabledClass}>
            <ChevronLeft className="h-4 w-4" />
            Sebelumnya
          </span>
        )}
        {page < totalPages ? (
          <Link href={href(page + 1)} className={linkClass}>
            Berikutnya
            <ChevronRight className="h-4 w-4" />
          </Link>
        ) : (
          <span className={cn(disabledClass)}>
            Berikutnya
            <ChevronRight className="h-4 w-4" />
          </span>
        )}
      </div>
    </div>
  );
}