import { useLayoutEffect, useState } from "react"

export const LG_MIN_PX = 1024
const LG_MQ = `(min-width: ${LG_MIN_PX}px)`

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

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

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

  return matches
}