frontend/src/useMediaQuery.jsx

import { useState, useEffect } from "react"

// Returns true when the viewport is at/below the breakpoint (mobile/tablet).
export function useIsMobile(breakpoint = 820) {
  const query = `(max-width: ${breakpoint}px)`
  const [matches, setMatches] = useState(
    () => typeof window !== "undefined" && window.matchMedia(query).matches
  )

  useEffect(() => {
    const mq = window.matchMedia(query)
    const onChange = () => setMatches(mq.matches)
    onChange()
    mq.addEventListener("change", onChange)
    return () => mq.removeEventListener("change", onChange)
  }, [query])

  return matches
}