"use client";
import { jsxs as s, jsx as e, Fragment as N } from "react/jsx-runtime";
import { useState as V, useMemo as b } from "react";
import i from "../../modules/ThreeItemsPlainCarousel/threeItemsPlainCarousel.module.css";
import { cn as y } from "../../utils/cn/cn.es.js";
import { Typography as r } from "../../components/Typography/Typography.es.js";
import { ProgressButton as f } from "../../components/ProgressButton/ProgressButton.es.js";
const p = 3, T = ({ title: g, cards: d }) => {
  const [o, m] = V(0), a = b(() => d.slice(0, p), [d]), C = b(() => a.length === 0 ? [] : [...a, ...a].slice(o, o + p), [a, o]), c = a.length, l = c > 1, h = () => {
    l && m((t) => t === 0 ? c - 1 : t - 1);
  }, u = () => {
    l && m((t) => t === c - 1 ? 0 : t + 1);
  };
  return /* @__PURE__ */ s("section", { className: i.root, children: [
    /* @__PURE__ */ s("div", { className: i.topContainer, children: [
      /* @__PURE__ */ e(r, { defaultVariant: "displayMd", mobileVariant: "headingXl", className: i.title, children: g }),
      /* @__PURE__ */ e("div", { className: i.topButton, children: /* @__PURE__ */ e(
        f,
        {
          left: {
            disabled: !l,
            onClick: h
          },
          right: {
            disabled: !l,
            onClick: u
          }
        }
      ) })
    ] }),
    /* @__PURE__ */ e("div", { className: i.bottomContainer, children: /* @__PURE__ */ e(N, { children: C.map((t, n) => /* @__PURE__ */ s(
      "div",
      {
        className: y({
          [i.mainCard]: n === 0,
          [i.minorCard]: n !== 0
        }),
        children: [
          /* @__PURE__ */ e("img", { src: t.image, alt: t.title }),
          /* @__PURE__ */ s("div", { className: i.cardContent, children: [
            /* @__PURE__ */ e(r, { defaultVariant: "headingMd", mobileVariant: "headingXs", children: t.title }),
            t.subtitle && /* @__PURE__ */ e(
              r,
              {
                defaultVariant: "labelLg",
                mobileVariant: "labelSm",
                className: i.subtitle,
                children: t.subtitle
              }
            )
          ] }),
          t.description && n === 0 && /* @__PURE__ */ e(
            r,
            {
              defaultVariant: "bodyLg",
              mobileVariant: "bodySm",
              className: i.descriptionText,
              children: t.description
            }
          )
        ]
      },
      `${t.title}-${n}`
    )) }) }),
    /* @__PURE__ */ e("div", { className: i.bottomButton, children: /* @__PURE__ */ e(
      f,
      {
        left: {
          disabled: !l,
          onClick: h
        },
        right: {
          disabled: !l,
          onClick: u
        }
      }
    ) })
  ] });
};
export {
  T as ThreeItemsPlainCarousel
};
