import { useState, useLayoutEffect } from "react";

const useScroll = () => {
  const [scrollX, setScrollX] = useState(
    typeof window !== "undefined" ? window.pageXOffset : 0
  );
  const [scrollY, setScrollY] = useState(
    typeof window !== "undefined" ? window.pageYOffset : 0
  );

  useLayoutEffect(() => {
    if (typeof window === "undefined") return;

    const listener = () => {
      setScrollX(window.pageXOffset);
      setScrollY(window.pageYOffset);
    };

    window.addEventListener("scroll", listener);
    return () => {
      window.removeEventListener("scroll", listener);
    };
  }, []);

  return {
    scrollX,
    scrollY,
  };
};

export default useScroll;