import { useCallback, useSyncExternalStore } from 'react';

const serverSnapshot = () => false;

export default function useMediaQuery(mediaQuery: string): boolean {
  const subscribe = useCallback(
    (onChange: () => void) => {
      const query = window.matchMedia(mediaQuery);
      query.addEventListener('change', onChange);
      return () => query.removeEventListener('change', onChange);
    },
    [mediaQuery]
  );
  const snapshot = useCallback(
    () => window.matchMedia(mediaQuery).matches,
    [mediaQuery]
  );
  return useSyncExternalStore(subscribe, snapshot, serverSnapshot);
}