import { jsx as o } from "react/jsx-runtime";
import { useHover as I } from "./index-use-hover.js";
import { classNames as h } from "./index-classNames.js";
import { useRef as y, useEffect as T } from "react";
import s from "./index-FadeCarouselAuto.module.scss.js";
const C = (m) => {
  const r = y(null), {
    items: l,
    ItemType: f,
    gap: d = 0,
    speed: p = 0,
    interval: n = 5
  } = m, c = I(r), u = {
    content: '""',
    // position: "absolute",
    // border: "1px solid red",
    top: 0,
    left: 0,
    padding: 10,
    height: "100%",
    // width: "35%", // Adjust the width as needed
    // background: `linear-gradient(to right, ${gradientColor}, rgba(245, 247, 249, 0))`,
    maskImage: "linear-gradient(90deg, rgba(0,0,0,0) 5%, rgba(0,0,0,1) 25%)",
    // pointerEvents: "none", // Allows interactions with underlying content
    zIndex: 2
  };
  return T(() => {
    const e = r.current;
    let t, a = performance.now();
    return e && !c && (t = setInterval(() => {
      const i = performance.now(), g = i - a, v = p * g / n;
      e.scrollLeft >= e.scrollWidth / 2 ? e.scrollLeft = 0 : e.scrollLeft += v, a = i;
    }, n)), () => clearInterval(t);
  }, [r.current, c]), o("div", {
    className: s.carousel,
    children: o("div", {
      className: h(s.scrollContainer),
      style: {
        display: "flex",
        gap: d,
        ...u
      },
      ref: r,
      children: [...l, ...l].map((e, t) => o("div", {
        className: s.carouselItem,
        children: o(f, {
          ...e
        })
      }, t))
    })
  });
};
export {
  C as FadeCarouselAuto
};
