import { useEffect, useState } from "react";

const adaptiveSplitQuery = "(min-width: 600px) and (min-height: 480px)";

function splitViewMatches() {
  return Boolean(globalThis.matchMedia?.(adaptiveSplitQuery).matches);
}

export function useAdaptiveSplitView() {
  const [matches, setMatches] = useState(splitViewMatches);

  useEffect(() => {
    const media = globalThis.matchMedia?.(adaptiveSplitQuery);
    if (!media) return undefined;
    const update = () => setMatches(media.matches);
    update();
    media.addEventListener("change", update);
    return () => media.removeEventListener("change", update);
  }, []);

  return matches;
}
