"use client";
import { jsx as i } from "react/jsx-runtime";
import { useState as c, useRef as u, useEffect as l } from "react";
import { cn as b } from "../../utils/cn/cn.es.js";
import s from "../../pageComponents/Bubbles/bubbles.module.css";
const p = ["xs", "lg", "md", "md", "xl", "sm", "sm", "md", "lg", "md", "xl", "xl", "xl"], F = ({ className: f }) => {
  const [t, v] = c(!1), [n, w] = c("forward"), [d, a] = c(!1), o = u(null), m = u(0);
  return l(() => {
    const e = () => {
      const r = window.scrollY;
      w(r > m.current ? "forward" : "reverse"), m.current = r;
    };
    return window.addEventListener("scroll", e, { passive: !0 }), () => window.removeEventListener("scroll", e);
  }, []), l(() => {
    const e = new window.IntersectionObserver(
      ([r]) => {
        v(r.isIntersecting);
      },
      { rootMargin: "0px 0px -20% 0px", threshold: 0.2 }
    );
    return o.current && e.observe(o.current), () => e.disconnect();
  }, []), l(() => {
    t && n === "forward" && a(!0), t && n === "reverse" && a(!1);
  }, [t, n]), /* @__PURE__ */ i("section", { ref: o, className: b(s.root, f), children: /* @__PURE__ */ i("div", { className: s.container, children: p.map((e, r) => /* @__PURE__ */ i(
    "div",
    {
      className: b(
        s.bubble,
        d && s.bubbleFinished,
        !d && s.bubbleReverse
      ),
      "data-size": e,
      "data-index": r
    },
    r
  )) }) });
};
export {
  F as Bubbles
};
