import { useSyncExternalStore } from 'react'

// Live boolean for a CSS media query, for the rare layout switch that CSS
// alone can't do (e.g. rendering a structurally different component tree).
export function useMediaQuery(query) {
  return useSyncExternalStore(
    (onChange) => {
      const mql = window.matchMedia(query)
      mql.addEventListener('change', onChange)
      return () => mql.removeEventListener('change', onChange)
    },
    () => window.matchMedia(query).matches
  )
}