import { type ComputedRef, computed } from 'vue'
import { useBreakpoints } from '@vueuse/core'
import type { ColProps } from '@arco-design/web-vue'

type ColBreakpoint = Pick<ColProps, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>
type Breakpoint = keyof ColBreakpoint

export function useBreakpoint() {
  const breakpoints = useBreakpoints({
    xs: 576, // <576
    sm: 576, // >= 576
    md: 768, // >=768
    lg: 992, // >=992
    xl: 1200, // >=1200
    xxl: 1600, // >=1600
  })

  const arr = breakpoints.current() as ComputedRef<Breakpoint[]>
  const breakpoint = computed(() => {
    return arr.value[arr.value.length - 1] || 'xs'
  })

  return { breakpoint }
}