import { ref, watch } from 'vue';

const DESKTOP_MIN = 1024;
const isDesktop = ref(typeof window !== 'undefined' ? window.innerWidth >= DESKTOP_MIN : false);

function syncViewportClass(desktop: boolean) {
  if (typeof document === 'undefined') return;
  document.documentElement.classList.toggle('is-desktop', desktop);
  document.documentElement.classList.toggle('is-mobile', !desktop);
}

function updateViewport() {
  isDesktop.value = window.innerWidth >= DESKTOP_MIN;
  syncViewportClass(isDesktop.value);
}

if (typeof window !== 'undefined') {
  updateViewport();
  window.addEventListener('resize', updateViewport);
}

watch(isDesktop, syncViewportClass, { immediate: true });

export function useViewport() {
  return {
    isDesktop,
  };
}