"use client";
import { jsx as o } from "react/jsx-runtime";
import { gsap as g } from "gsap";
import { useRef as u, useEffect as n } from "react";
import { ScrollTrigger as y } from "../../../../node_modules/.pnpm/gsap@3.13.0/node_modules/gsap/ScrollTrigger.es.js";
import { cn as i } from "../../../../utils/cn/cn.es.js";
import e from "../../../../modules/OptimalHealth/components/ClockImages/clockImages.module.css";
g.registerPlugin(y);
const c = [
  { key: "smallSquareImage1", className: e.smallSquareImage, to: { x: 100, y: 60 } },
  { key: "rectImage2", className: e.rectImage, to: { x: 70, y: 70 } },
  { key: "smallSquareImage3", className: e.smallSquareImage, to: { x: 40, y: 60 } },
  { key: "largeSquareImage4", className: e.largeSquareImage, to: { x: -110, y: 55 } },
  { key: "rectImage5", className: e.rectImage, to: { x: -150, y: 69 } },
  { key: "smallSquareImage6", className: e.smallSquareImage, to: { x: -100, y: 9 } },
  { key: "rectImage7", className: e.rectImage, to: { x: -65, y: -100 } },
  { key: "smallSquareImage8", className: e.smallSquareImage, to: { x: 50, y: -100 } },
  { key: "rectImage9", className: e.rectImage, to: { x: 50, y: -50 } },
  { key: "largeSquareImage10", className: e.largeSquareImage, to: { x: 56, y: 13 } }
], p = ({ images: t }) => {
  const r = u(null);
  return n(() => {
    r.current && c.forEach(({ key: a, to: m }) => {
      var l;
      const s = (l = r.current) == null ? void 0 : l.querySelector(`[data-ohealth-image-key="${a}"]`);
      s && g.fromTo(
        s,
        { x: 0, y: 0 },
        {
          x: m.x,
          y: m.y,
          duration: 5,
          ease: "power2.out",
          scrollTrigger: {
            trigger: r.current,
            start: "top 80%",
            end: "+=500",
            once: !0,
            scrub: !1,
            toggleActions: "play none none reverse"
          }
        }
      );
    });
  }, [t]), /* @__PURE__ */ o("div", { ref: r, className: e.root, children: c.map(({ key: a, className: m }) => /* @__PURE__ */ o(
    "img",
    {
      src: t[a],
      className: i(e.image, m, e[a]),
      "data-ohealth-image-key": a,
      alt: a
    },
    a
  )) });
};
export {
  p as ClockImages
};
