import { ref, onMounted, onUnmounted } from 'vue'

/** Viewport width below this is treated as phone/small layout (matches Element Plus sm). */
export function useBreakpoint(maxWidth = 768) {
  const isNarrow = ref(false)

  const update = () => {
    isNarrow.value = window.innerWidth < maxWidth
  }

  onMounted(() => {
    update()
    window.addEventListener('resize', update, { passive: true })
  })
  onUnmounted(() => window.removeEventListener('resize', update))

  return { isNarrow }
}
