import { useMatchMedia } from "@/hooks/use-match-media"

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

const XS_MQ = `(max-width: ${XS_MAX_PX}px)`

/** Sync read for event handlers / layout (no hook delay). */
export function readXsMatches(): boolean {
  if (typeof window === "undefined") return false
  return window.matchMedia(XS_MQ).matches
}

export function useIsXs() {
  return useMatchMedia(XS_MQ)
}