const BREAKPOINTS = {
  xs: 360,
  sm: 768,
  md: 1024,
  lg: 1440,
} as const

/**
 * 확실한 반응형 브레이크포인트 헬퍼 (useWindowSize 기반)
 */
export const useResponsiveBreakpointsReliable = () => {
  const { width } = useWindowSize()

  return computed(() => ({
    xs: width.value >= BREAKPOINTS.xs,
    sm: width.value >= BREAKPOINTS.sm,
    md: width.value >= BREAKPOINTS.md,
    lg: width.value >= BREAKPOINTS.lg,
    isMobile: width.value < BREAKPOINTS.md,
    isTablet: width.value >= BREAKPOINTS.sm && width.value < BREAKPOINTS.md,
    isDesktop: width.value >= BREAKPOINTS.md,
  }))
}