import { useEffect, useState } from 'react';

const useScroll = (ref) => {
  const [state, setState] = useState({
    x: 0,
    y: 0
  });

  useEffect(() => {
    const handler = () => {
      setState({
        x: ref.current.scrollLeft,
        y: ref.current.scrollTop
      });
    };

    if (ref.current) {
      ref.current.addEventListener('scroll', handler);
    }

    return () => {
      if (ref.current) {
        ref.current.removeEventListener('resize', handler);
      }
    };
  }, [ref.current]);

  return state;
};

export default useScroll;
