"use client";
import { jsxs as l, jsx as i } from "react/jsx-runtime";
import { useState as o, useMemo as k, useCallback as N } from "react";
import { EIconName as v } from "../../../../components/Icon/constants.es.js";
import n from "../../../../pageComponents/Footer/components/TopTreatmentsSlider/topTreatmentsSlider.module.css";
import { Typography as d } from "../../../../components/Typography/Typography.es.js";
import { Button as V } from "../../../../components/Button/Button.es.js";
import { Icon as x } from "../../../../components/Icon/Icon.es.js";
const j = ({ title: b, products: e }) => {
  const [r, h] = o(0), [t, m] = o(1), [s, c] = o(!1), I = k(() => {
    if (e.length === 2) {
      const g = (r - 1 + e.length) % e.length, f = (r + 1) % e.length;
      return [e[g], e[r === g ? f : r], e[f]].filter(
        (S, A, R) => R.findIndex((T) => T.name === S.name) === A
      );
    }
    const a = (r - 1 + e.length) % e.length, y = (r + 1) % e.length;
    return [e[a], e[r], e[y]];
  }, [r, e]), C = N(
    (a) => {
      a.stopPropagation(), !s && (c(!0), m(2));
    },
    [s]
  ), p = N(
    (a) => {
      a.stopPropagation(), !s && (c(!0), m(0));
    },
    [s]
  ), w = () => {
    t === 2 ? h((a) => (a + 1) % e.length) : t === 0 && h((a) => (a - 1 + e.length) % e.length), m(1), c(!1);
  };
  return /* @__PURE__ */ l("div", { className: n.root, children: [
    /* @__PURE__ */ i(
      d,
      {
        as: "span",
        defaultVariant: "labelSm",
        mobileVariant: "labelXs",
        weight: "regular",
        emphasis: !0,
        className: n.title,
        children: b
      }
    ),
    /* @__PURE__ */ l("div", { className: n.sliderContainer, children: [
      /* @__PURE__ */ i(
        "div",
        {
          className: n.sliderTrack,
          style: {
            transform: `translateX(calc(-${t * 100}% - ${t * 10}px))`,
            transition: s ? "transform 0.3s cubic-bezier(0.4,0,0.2,1)" : "none"
          },
          onTransitionEnd: w,
          children: I.map((a) => /* @__PURE__ */ i("a", { href: a.link, className: n.slide, children: /* @__PURE__ */ l("div", { className: n.productCard, children: [
            /* @__PURE__ */ i("div", { className: n.imageWrapper, children: /* @__PURE__ */ i("img", { src: a.image, alt: a.name, className: n.image }) }),
            /* @__PURE__ */ l("div", { className: n.rightSide, children: [
              /* @__PURE__ */ l("div", { className: n.headerSplit, children: [
                /* @__PURE__ */ i("div", { className: n.nameContainer, children: /* @__PURE__ */ i(d, { defaultVariant: "headingXs", children: a.name }) }),
                /* @__PURE__ */ i(
                  d,
                  {
                    defaultVariant: "bodyMd",
                    mobileVariant: "bodySm",
                    className: n.price,
                    children: `Starting at ${a.price}/mo`
                  }
                )
              ] }),
              /* @__PURE__ */ i("div", { className: n.actions, children: /* @__PURE__ */ i("div", { className: n.btnLearnMore, children: /* @__PURE__ */ i(V, { size: "sm", variant: "primary-invert", children: "Learn More" }) }) })
            ] })
          ] }) }, a.name))
        }
      ),
      /* @__PURE__ */ l("div", { className: n.switchers, children: [
        /* @__PURE__ */ i("div", { className: n.arrowIcon, onClick: p, children: /* @__PURE__ */ i(x, { name: v.ARROW_BACK }) }),
        /* @__PURE__ */ i("div", { className: n.arrowIcon, onClick: C, children: /* @__PURE__ */ i(x, { name: v.ARROW_FORWARD }) })
      ] })
    ] })
  ] });
};
export {
  j as TopTreatmentsSlider
};
