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

export function useBootstrapBreakpoint() {
  const width = ref(window.innerWidth);

  const onResize = () => {
    width.value = window.innerWidth;
  };

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

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

  // 计算当前断点
  const breakpoint = computed(() => {
    if (width.value < 576) return 'xs';
    if (width.value >= 576 && width.value < 768) return 'sm';
    if (width.value >= 768 && width.value < 992) return 'md';
    if (width.value >= 992 && width.value < 1200) return 'lg';
    if (width.value >= 1200 && width.value < 1400) return 'xl';
    return 'xxl';
  });

  return { width, breakpoint };
}