import { useWindowSize } from '@vueuse/core'
import { computed, onMounted, ref } from 'vue'

import { Breakpoints } from '@/constants/layout'

export const useIsBreakpoint = (breakpoint: Breakpoints = Breakpoints.MOBILE) => {
  const isMounted = ref(false)
  onMounted(() => (isMounted.value = true))

  const { width } = useWindowSize()

  return computed(() => {
    if (!isMounted.value) return false
    return width.value < breakpoint
  })
}