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

const getScrollY = () => document?.documentElement?.scrollTop || document?.body?.scrollTop;

export const useScroll = () => {
  const scrollY = ref(0);

  const handleScroll = () => {
    scrollY.value = getScrollY();
  };

  onMounted(() => {
    if (process.client) {
      scrollY.value = getScrollY();
      window.addEventListener('scroll', handleScroll);
    }
  });

  onUnmounted(() => {
    if (process.client) {
      window.removeEventListener('scroll', handleScroll);
    }
  });

  return {
    scrollY
  };
}