import { computed, ref } from "vue"

/**
 * Hook to detect if the user is on a mobile device
 */
export const useMobile = () => {
    const windowWidth = ref(window.innerWidth);

    window.addEventListener("resize", () => {
        windowWidth.value = window.innerWidth;
    });

    return {
        isMobile: computed(() => windowWidth.value < 768),
        isTablet: computed(() => windowWidth.value < 1100 && windowWidth.value >= 768),
        isDesktop: computed(() => windowWidth.value >= 1100),
    }
}