"use client";
import { useSearchParams, usePathname, useRouter } from "next/navigation";
import { updateQuery } from "@/lib/list-query";
export function useQueryUpdate() {
  const params = useSearchParams(),
    pathname = usePathname(),
    router = useRouter();
  return (updates: Record<string, string | null>) => {
    const query = updateQuery(params.toString(), updates);
    router.replace(`${pathname}${query ? "?" + query : ""}`, { scroll: false });
  };
}
export function Tabs({
  items,
  queryKey = "tab",
  value,
  onChange,
}: {
  items: readonly { value: string; label: string }[];
  queryKey?: string;
  value?: string;
  onChange?: (value: string) => void;
}) {
  const params = useSearchParams(),
    update = useQueryUpdate();
  const requested = value ?? params.get(queryKey);
  const selected = items.some((i) => i.value === requested)
    ? requested
    : items[0]?.value;
  return (
    <nav
      aria-label="Page tabs"
      className="mb-5 flex max-w-full gap-1 overflow-x-auto rounded-lg border bg-card p-1 w-fit"
    >
      {items.map((item) => (
        <button
          key={item.value}
          aria-current={item.value === selected ? "page" : undefined}
          className={`whitespace-nowrap rounded-md px-4 py-2.5 text-sm font-medium ${selected === item.value ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"}`}
          onClick={() =>
            onChange
              ? onChange(item.value)
              : update({
                  [queryKey]: item.value,
                  paginate_page: null,
                  query: null,
                })
          }
        >
          {item.label}
        </button>
      ))}
    </nav>
  );
}