import { ref, onMounted, onUnmounted } from "vue";

export function useViewport() {
    const isMobileView = ref<boolean>(false);
    const isTabletView = ref<boolean>(false);
    const is768pxView = ref<boolean>(false);
    const isDesktopView = ref<boolean>(false);

    const updateViewport = () => {
        const width = window.innerWidth;
        isMobileView.value = width < 640; // Mobile
        isTabletView.value = width >= 640 && width < 768; // Tablet: >= 640px sampai < 1024px (tailwind: sm)
        is768pxView.value = width >= 768; // >= 768px (tailwind: md)
        isDesktopView.value = width >= 1024; // Desktop: >= 1024px (tailwind: lg)
    };

    onMounted(() => {
        updateViewport();
        window.addEventListener("resize", updateViewport);
    });

    onUnmounted(() => {
        window.removeEventListener("resize", updateViewport);
    });

    return {
        isMobileView,
        isTabletView,
        is768pxView,
        isDesktopView,
    };
}