import { useEffect, useId } from "react";
import { usePlaybackPauseStore } from "@/stores/playback-pause-store";

/**
 * Suspend stream playback while `active` is true. The hook owns its own
 * registration id; multiple instances compose. `label` is for devtools only.
 */
export function useSuspendPlayback(active: boolean, label: string) {
  const id = useId();

  useEffect(() => {
    if (!active) return;
    const { add, remove } = usePlaybackPauseStore.getState();
    add(id, label);
    return () => remove(id);
  }, [active, id, label]);
}
