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

const MOBILE_BREAKPOINT = 500;

export function useBreakpoint() {
  const isMobile = ref(false);

  const update = () => {
    if (typeof window !== 'undefined') {
      isMobile.value = window.innerWidth < MOBILE_BREAKPOINT;
    }
  };

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

  onUnmounted(() => {
    if (typeof window !== 'undefined') {
      window.removeEventListener('resize', update);
    }
  });

  return { isMobile };
}