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

export function useIsMobile(breakpoint = 780) {
  const isMobile = ref(false);

  const update = () => {
    isMobile.value = window.matchMedia(`(max-width: ${breakpoint}px)`).matches;
  };

  onMounted(() => {
    update();
    window.addEventListener('resize', update);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', update);
  });

  return { isMobile };
}