"use client";
import { jsxs as n, jsx as a } from "react/jsx-runtime";
import { Navigation as w } from "swiper/modules";
import { Swiper as C, SwiperSlide as R } from "swiper/react";
/* empty css                                                                             */
/* empty css                                                                                         */
/* empty css                                                                                         */
import e from "../../../../modules/HowItWorks/components/Content/content.module.css";
import { Typography as r } from "../../../../components/Typography/Typography.es.js";
import { ProgressButton as V } from "../../../../components/ProgressButton/ProgressButton.es.js";
const k = [w], T = ({ items: t, colorScheme: l, showBottomNav: d, swiper: o }) => {
  const {
    isEnd: c,
    isBeginning: h,
    hideNav: m,
    handleSlideChange: p,
    handlePrevClick: g,
    handleNextClick: u,
    onSwiperInit: N,
    handleSwiperResize: b,
    handleReachEnd: S,
    handleReachBeginning: f,
    handleSlideTo: v
  } = o;
  return /* @__PURE__ */ n("div", { className: e.root, children: [
    /* @__PURE__ */ a("div", { className: e.carouselArea, "data-color-scheme": l, children: /* @__PURE__ */ a(
      C,
      {
        onSwiper: N,
        onResize: b,
        onSlideChange: p,
        onReachEnd: S,
        onReachBeginning: f,
        modules: k,
        spaceBetween: 0,
        slidesPerView: "auto",
        className: e.swiper,
        children: t.map((i, s) => /* @__PURE__ */ a(
          R,
          {
            className: e.swiperSlide,
            "data-color-scheme": l,
            children: /* @__PURE__ */ n("div", { className: e.card, onClick: () => v(s), children: [
              /* @__PURE__ */ n("div", { className: e.cardHeader, children: [
                /* @__PURE__ */ a("img", { src: i.image, className: e.cardImage, alt: i.title }),
                /* @__PURE__ */ a(
                  r,
                  {
                    as: "h3",
                    defaultVariant: "headingLg",
                    mobileVariant: "headingXs",
                    className: e.title,
                    children: i.title
                  }
                ),
                i.subtitle && /* @__PURE__ */ a(
                  r,
                  {
                    as: "h4",
                    defaultVariant: "labelSm",
                    mobileVariant: "labelXs",
                    emphasis: !0,
                    className: e.subtitle,
                    children: i.subtitle
                  }
                )
              ] }),
              /* @__PURE__ */ a(r, { as: "p", defaultVariant: "bodyLg", mobileVariant: "bodySm", children: i.description })
            ] })
          },
          `${i.title}_${s}`
        ))
      }
    ) }),
    !m && d && /* @__PURE__ */ a("div", { className: e.navigation, children: /* @__PURE__ */ a(
      V,
      {
        invert: l === "dark",
        left: {
          disabled: h,
          onClick: g
        },
        right: {
          disabled: c,
          onClick: u
        }
      }
    ) })
  ] });
};
export {
  T as Content
};
