"use client"

import { useCallback, useSyncExternalStore } from "react"

export function useIsBreakpoint(mode: "min" | "max" = "max", breakpoint = 768) {
  const query = mode === "min"
    ? `(min-width: ${breakpoint}px)`
    : `(max-width: ${breakpoint - 1}px)`
  const subscribe = useCallback((notify: () => void) => {
    const media = window.matchMedia(query)
    media.addEventListener("change", notify)
    return () => media.removeEventListener("change", notify)
  }, [query])

  return useSyncExternalStore(
    subscribe,
    () => window.matchMedia(query).matches,
    () => false,
  )
}