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

export function useWindowSize() {
  const width = ref(0);
  const height = ref(0);

  function onResize() {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  }

  onMounted(() => {
    window.addEventListener('resize', onResize, false);
    onResize();
  });

  onUnmounted(() => {
    window.removeEventListener('resize', onResize, false);
  });

  return {
    width,
    height,
  };
}