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

// Брейкпоинт для мобильных устройств (берётся из config.js)
export const MOBILE_BREAKPOINT = window.APP_CONFIG?.MOBILE_BREAKPOINT ?? 768

// Composable для определения мобильного устройства
export function useMobile() {
  const isMobile = ref(false)

  const checkMobile = () => {
    isMobile.value = window.innerWidth <= MOBILE_BREAKPOINT
  }

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

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

  return { isMobile, MOBILE_BREAKPOINT }
}

// Функция для добавления класса на body (вызывать в App.vue)
export function initMobileClass() {
  const updateBodyClass = () => {
    if (window.innerWidth <= MOBILE_BREAKPOINT) {
      document.body.classList.add('is-mobile')
    } else {
      document.body.classList.remove('is-mobile')
    }
  }

  updateBodyClass()
  window.addEventListener('resize', updateBodyClass)

  return () => window.removeEventListener('resize', updateBodyClass)
}
