import { useLayoutEffect, useState } from "react"

export const MD_MIN_PX = 768
const MD_MQ = `(min-width: ${MD_MIN_PX}px)`

export function readMdMatches(): boolean {
  if (typeof window === "undefined") return false
  return window.matchMedia(MD_MQ).matches
}

export function useIsMd() {
  const [matches, setMatches] = useState(false)

  useLayoutEffect(() => {
    const mql = window.matchMedia(MD_MQ)
    const update = () => setMatches(mql.matches)
    update()
    mql.addEventListener("change", update)
    return () => mql.removeEventListener("change", update)
  }, [])

  return matches
}