import { useEffect, useState } from "react"

function useMediaQuery(query: string) {
  const [isMatch, setIsMatch] = useState(false)

  useEffect(() => {
    const media = window.matchMedia(query)
    if (media.matches !== isMatch) {
      setIsMatch(media.matches)
    }

    const listener = () => setIsMatch(media.matches)
    media.addEventListener("change", listener)

    return () => media.removeEventListener("change", listener)
  }, [isMatch, query])

  return isMatch
}

export default useMediaQuery