import { breakpoints } from '@/libs/theme'
import { tryOnMounted, useWindowSize } from '@vueuse/core'
import { ref, computed } from 'vue'

const { width } = useWindowSize()

export default () => {
    const mounted = ref(false)

    tryOnMounted(() => {
        if (!import.meta.env.SSR) mounted.value = true
    })

    const isMobile = computed(
        () => mounted.value && width.value < breakpoints.mobile,
    )
    const isDesktop = computed(
        () => mounted.value && width.value >= breakpoints.mobile,
    )

    return {
        isMobile,
        isDesktop,
    }
}