import Link from "next/link";

export function Pager({
  basePath,
  cursor,
  nextCursor,
  extra = {},
}: {
  basePath: string;
  cursor?: string;
  nextCursor?: string | null;
  extra?: Record<string, string | undefined>;
}) {
  const make = (c?: string) => {
    const sp = new URLSearchParams();
    for (const [k, v] of Object.entries(extra)) if (v) sp.set(k, v);
    if (c) sp.set("cursor", c);
    const qs = sp.toString();
    return qs ? `${basePath}?${qs}` : basePath;
  };
  return (
    <div className="mt-4 flex justify-between text-sm">
      <span className="text-neutral-500">{cursor ? `cursor: ${cursor.slice(0, 12)}…` : ""}</span>
      {nextCursor ? (
        <Link href={make(nextCursor)} className="text-blue-300 hover:text-blue-200">
          next →
        </Link>
      ) : (
        <span className="text-neutral-600">end</span>
      )}
    </div>
  );
}