/**
 * Responsive utility for mobile/desktop detection
 */
export function useResponsive() {
  const checkMobile = () => {
    return window.matchMedia('(max-width: 767px)').matches
  }

  return {
    isMobile: checkMobile(),
    checkMobile
  }
}

// Vue mixin version (for Vue 2)
export const responsiveMixin = {
  data() {
    return {
      isMobile: window.matchMedia('(max-width: 767px)').matches,
      windowWidth: window.innerWidth
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
    this.handleResize()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth
      this.isMobile = window.matchMedia('(max-width: 767px)').matches
    }
  }
}