import { useEffect, useState } from "react";
import { NARROW_BREAKPOINT } from "../ui/floating-window/floatingGeometry";

/**
 * Is this a phone-width screen?, mobile ruling (Spencer, 2026-08-14).
 *
 * REUSES `NARROW_BREAKPOINT` (768) RATHER THAN INVENTING A THIRD NUMBER. The codebase already has two
 * width lines and they mean different things: 1150 is "there is no room for a persistent nav rail", and
 * 768 is "this is a phone" - the line the video window already uses to decide the window IS the viewport.
 * This is the second question, so it takes the second constant. A third number would drift from both.
 *
 * AND 768 IS THE RIGHT LINE FOR SPENCER'S RULING SPECIFICALLY: *"very few staff would be using a phone
 * as their device, most using laptop/desktop or tablet."* A tablet in portrait is 768-834px, so it keeps
 * the pull-down; only a phone drops to the icon.
 */
export const useIsNarrow = (): boolean => {
  const [narrow, setNarrow] = useState(() => window.innerWidth < NARROW_BREAKPOINT);

  useEffect(() => {
    const onResize = () => setNarrow(window.innerWidth < NARROW_BREAKPOINT);
    onResize();
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  return narrow;
};