import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from "classnames";
import { useGradientColor } from "./hooks/useGradientColor.js";
import { useRightInScrollable } from "./hooks/useRightInScrollable.js";
import { useScrollEvent } from "./hooks/useScrollEvent.js";
/**
 * @internal
 */
export function ScrollGradient({ backgroundColor = "#FFFFFF", size = 20, className, contentClassName, onScroll, children, }) {
    const { right, content, setContent } = useRightInScrollable();
    const { top, bottom, onScrollHandler } = useScrollEvent(content, size / 2, onScroll);
    const { topBackground, bottomBackground } = useGradientColor(backgroundColor);
    return (_jsxs("div", { className: cx("gd-gradient-wrapper", className), children: [
            _jsx("div", { className: cx("gd-gradient-top"), style: { right, opacity: top, height: size, background: topBackground } }), _jsx("div", { className: cx("gd-gradient-content", contentClassName), onScroll: onScrollHandler, ref: setContent, children: children }), _jsx("div", { className: cx("gd-gradient-bottom"), style: { right, opacity: bottom, height: size, background: bottomBackground } })
        ] }));
}
