"use client";
import { jsx as t, jsxs as o } from "react/jsx-runtime";
import r from "../../modules/TextBlockAnimated/textBlockAnimated.module.css";
import s from "gsap";
import { SplitText as l } from "../../node_modules/.pnpm/gsap@3.13.0/node_modules/gsap/SplitText.es.js";
import { ScrollTrigger as p } from "../../node_modules/.pnpm/gsap@3.13.0/node_modules/gsap/ScrollTrigger.es.js";
import { useGSAP as d } from "@gsap/react";
import { useRef as u } from "react";
import { cn as f } from "../../utils/cn/cn.es.js";
import { Typography as i } from "../../components/Typography/Typography.es.js";
s.registerPlugin(l, p);
function v({ label: a, body: m, colorScheme: c }) {
  const e = u(null);
  return d(
    () => {
      l.create(e.current, {
        type: "words chars",
        className: r.bodyText,
        autoSplit: !0,
        onSplit: (n) => s.from(n.chars, {
          stagger: 2,
          opacity: 0.3,
          duration: 1,
          scrollTrigger: {
            trigger: e.current,
            start: "top 70%",
            end: "top 30%",
            scrub: !0,
            markers: !1
          }
        })
      });
    },
    { scope: e }
  ), /* @__PURE__ */ t("div", { className: f(r.root, r[c]), children: /* @__PURE__ */ o("div", { className: r.container, children: [
    a && /* @__PURE__ */ t(
      i,
      {
        as: "p",
        defaultVariant: "labelMd",
        mobileVariant: "labelSm",
        emphasis: !0,
        className: r.label,
        children: a
      }
    ),
    /* @__PURE__ */ o(i, { as: "div", defaultVariant: "displayMd", mobileVariant: "headingMd", className: r.body, children: [
      a && /* @__PURE__ */ t("span", { className: r.spacer, children: " " }),
      /* @__PURE__ */ t("p", { className: r.bodyText, ref: e, children: m })
    ] })
  ] }) });
}
export {
  v as TextBlockAnimated
};
