"use client";
import { jsxs as d, jsx as r } from "react/jsx-runtime";
import { useRef as g, useState as R } from "react";
import v from "gsap";
import { Flip as u } from "../../node_modules/.pnpm/gsap@3.13.0/node_modules/gsap/Flip.es.js";
import { useGSAP as T } from "@gsap/react";
import { cn as k } from "../../utils/cn/cn.es.js";
import e from "../../modules/SlidingTabsGallery/SlidingTabsGallery.module.css";
import { Bubbles as x } from "../../pageComponents/Bubbles/Bubbles.es.js";
import { HighlightedTitle as b } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
import { Typography as N } from "../../components/Typography/Typography.es.js";
import { Icon as B } from "../../components/Icon/Icon.es.js";
import { Gradient as S } from "../../pageComponents/Gradient/Gradient.es.js";
v.registerPlugin(u);
const W = ({ title: y, tabs: m, withBubbles: f }) => {
  const n = g(null), o = g(null), [s, h] = R(m[0]);
  T(
    () => {
      const t = n.current, i = o.current, p = (c) => {
        if (t && i && c) {
          const l = i.getBoundingClientRect(), a = c.getBoundingClientRect();
          v.set(t, {
            left: a.left - l.left,
            top: a.top - l.top,
            width: a.width,
            height: a.height
          });
        }
      };
      if (i && i.children.length > 1) {
        const c = i.children[1];
        c && p(c);
      }
    },
    { dependencies: [m, h], scope: o }
  );
  const C = (t, i) => {
    if (t === s) return;
    const p = u.getState(n.current);
    if (h(t), n.current && o.current && o.current.children.length > i + 1) {
      const c = o.current.children[i + 1];
      if (c) {
        const l = o.current.getBoundingClientRect(), a = c.getBoundingClientRect();
        n.current.style.left = `${a.left - l.left}px`, n.current.style.top = `${a.top - l.top}px`, n.current.style.width = `${a.width}px`, n.current.style.height = `${a.height}px`;
      }
    }
    u.from(p, {
      targets: n.current,
      duration: 0.3,
      ease: "power1.inOut"
    });
  };
  return /* @__PURE__ */ d("section", { className: e.root, children: [
    f && /* @__PURE__ */ r(x, { className: e.bubbles }),
    /* @__PURE__ */ d("div", { className: e.container, children: [
      /* @__PURE__ */ r(b, { as: "div", title: y, className: e.header, colorScheme: "dark" }),
      /* @__PURE__ */ d("div", { className: e.content, children: [
        s.image && /* @__PURE__ */ r("div", { className: e.imageWrap, children: /* @__PURE__ */ r("img", { src: s.image, alt: "Total Care", className: e.image }) }),
        /* @__PURE__ */ r("div", { className: e.tabsContainer, children: /* @__PURE__ */ d("div", { ref: o, className: e.tabs, children: [
          /* @__PURE__ */ r("div", { ref: n, id: "marker", className: e.marker }),
          m.map((t, i) => /* @__PURE__ */ d(
            "button",
            {
              className: k(e.tab, {
                [e.active]: s === t
              }),
              onClick: () => C(t, i),
              children: [
                t.icon && /* @__PURE__ */ r(N, { defaultVariant: "displayMd", className: e.icon, children: /* @__PURE__ */ r(B, { name: t.icon }) }),
                /* @__PURE__ */ r(N, { defaultVariant: "displayMd", className: e.hideMobile, children: t.label })
              ]
            },
            t.label
          ))
        ] }) }),
        s.description && /* @__PURE__ */ r("div", { className: e.description, children: /* @__PURE__ */ r(
          b,
          {
            as: "div",
            defaultVariant: "bodyXl",
            mobileVariant: "bodyMd",
            className: e.descriptionText,
            title: s.description,
            colorScheme: "dark"
          }
        ) })
      ] })
    ] }),
    f && /* @__PURE__ */ r(S, { variant: "blue" })
  ] });
};
export {
  W as SlidingTabsGallery
};
