import { useCallback, useRef, WheelEvent } from "react";

function useHorizontalWheel<T extends HTMLElement>() {
    const ref = useRef<T | null>(null);
    const onWheel = useCallback((e: WheelEvent<T>) => {
        if (!ref.current) return;

        e.stopPropagation();
        if (e.deltaY < 0) {
            ref.current.scrollLeft -= Math.max(e.deltaY, -40);
        } else {
            ref.current.scrollLeft -= Math.min(e.deltaY, 40);
        }
    }, []);
    return { ref, onWheel };
}

export default useHorizontalWheel;
