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

export function useIsMobile() {
  const width = ref<number>(window.innerWidth);

  const isMobile = computed<boolean>(() => width.value <= 768);

  function updateWidth() {
    width.value = window.innerWidth;
  }

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

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

  return {
    isMobile,
  };
}
