import { useEffect, useState } from "react"

/** Tailwind `sm` breakpoint — viewports below are treated as xs. */
const XS_MAX_PX = 639

export function useIsXs() {
  const [isXs, setIsXs] = useState(false)

  useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${XS_MAX_PX}px)`)
    const update = () => setIsXs(mql.matches)
    update()
    mql.addEventListener("change", update)
    return () => mql.removeEventListener("change", update)
  }, [])

  return isXs
}