import { useEffect, useState } from "react";

/** Matches Tailwind `lg:` (1024px). Used for desktop-only UI such as the AI split panel. */
export function useIsLgUp() {
  const [lgUp, setLgUp] = useState(
    () =>
      typeof window !== "undefined" &&
      window.matchMedia("(min-width: 1024px)").matches,
  );

  useEffect(() => {
    const mql = window.matchMedia("(min-width: 1024px)");
    const sync = () => setLgUp(mql.matches);
    mql.addEventListener("change", sync);
    sync();
    return () => mql.removeEventListener("change", sync);
  }, []);

  return lgUp;
}