// `useSearchParams` is re-exported from app-shell so it binds to the SAME
// router context the shell provides (see use-url-collection-state).
import { useSearchParams } from "@tailor-platform/app-shell";
import { useCallback } from "react";

/**
 * Read/write a single URL search-param as component state. Setting `null`
 * removes the param. Used to keep overlay (sheet) open state across
 * reloads — the "right sheet (wide drilldown)" pattern. Uses `replace` so
 * opening/closing a sheet does not spam browser history.
 */
export function useSearchParamState(key: string): [string | null, (value: string | null) => void] {
  const [params, setParams] = useSearchParams();
  const value = params.get(key);

  const setValue = useCallback(
    (next: string | null) => {
      setParams(
        (prev) => {
          const updated = new URLSearchParams(prev);
          if (next === null || next === "") {
            updated.delete(key);
          } else {
            updated.set(key, next);
          }
          return updated;
        },
        { replace: true },
      );
    },
    [key, setParams],
  );

  return [value, setValue];
}