import { useSyncExternalStore } from "react";

const COMPACT_DETAIL = "(max-width: 1099px)";

function subscribe(listener: () => void) {
  const media = window.matchMedia(COMPACT_DETAIL);

  media.addEventListener("change", listener);

  return () => media.removeEventListener("change", listener);
}

export function useCompactDetail() {
  return useSyncExternalStore(
    subscribe,
    () => window.matchMedia(COMPACT_DETAIL).matches,
    () => false
  );
}