import { useEffect, useState } from 'react'

// useMediaQuery tracks whether a CSS media query currently matches, re-rendering
// when it flips (viewport resize, orientation change). Used to switch on the
// phone layout's touch interactions, which mirror the `max-width: 600px` styles.
export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(() =>
    typeof window !== 'undefined' && !!window.matchMedia
      ? window.matchMedia(query).matches
      : false,
  )

  useEffect(() => {
    if (typeof window === 'undefined' || !window.matchMedia) return
    const mql = window.matchMedia(query)
    const onChange = () => setMatches(mql.matches)
    onChange()
    mql.addEventListener('change', onChange)
    return () => mql.removeEventListener('change', onChange)
  }, [query])

  return matches
}