"use client";
import { jsxs as r, jsx as i } from "react/jsx-runtime";
import a from "../../modules/HowItWorks/howItWorks.module.css";
import { useSwiper as v } from "../../utils/useSwiper/useSwiper.es.js";
import { EAnalyticsEventType as p, EAnalyticsEvent as C } from "../../types/analytics/analytics.es.js";
import { Typography as f } from "../../components/Typography/Typography.es.js";
import { Button as d } from "../../components/Button/Button.es.js";
import { ProgressButton as c } from "../../components/ProgressButton/ProgressButton.es.js";
import { Content as k } from "./components/Content/Content.es.js";
const P = ({ title: m, getStartedLink: e, items: h, colorScheme: t = "light" }) => {
  const n = v(), s = t === "dark" ? "muted-invert" : "muted", l = (u) => {
    var o;
    (o = window.eventBus) == null || o.emit("analytics", {
      event: C.ctaClicked,
      type: p.interaction,
      component: "HowItWorks",
      payload: {
        link: e
      }
    });
  };
  return /* @__PURE__ */ r("section", { className: a.root, "data-color-scheme": t, children: [
    /* @__PURE__ */ r("div", { className: a.headerContainer, children: [
      /* @__PURE__ */ i(f, { as: "h2", defaultVariant: "displayMd", mobileVariant: "headingXl", children: m }),
      e && /* @__PURE__ */ i("div", { className: a.desktop, children: /* @__PURE__ */ i(
        d,
        {
          as: "a",
          href: e,
          variant: s,
          size: "lg",
          onClick: l,
          children: "Get started"
        }
      ) }),
      e && /* @__PURE__ */ i("div", { className: a.mobile, children: /* @__PURE__ */ i(
        d,
        {
          as: "a",
          href: e,
          variant: s,
          size: "sm",
          onClick: l,
          children: "Get started"
        }
      ) }),
      !e && /* @__PURE__ */ i("div", { className: a.navigation, children: /* @__PURE__ */ i(
        c,
        {
          invert: t === "dark",
          left: {
            disabled: n.isBeginning,
            onClick: n.handlePrevClick
          },
          right: {
            disabled: n.isEnd,
            onClick: n.handleNextClick
          }
        }
      ) })
    ] }),
    /* @__PURE__ */ i(k, { items: h, colorScheme: t, swiper: n, showBottomNav: !!e }),
    !e && /* @__PURE__ */ i("div", { className: a.mobileNavigation, children: /* @__PURE__ */ i(
      c,
      {
        invert: t === "dark",
        left: {
          disabled: n.isBeginning,
          onClick: n.handlePrevClick
        },
        right: {
          disabled: n.isEnd,
          onClick: n.handleNextClick
        }
      }
    ) })
  ] });
};
export {
  P as HowItWorks
};
