"use client";
import { jsxs as s, jsx as i } from "react/jsx-runtime";
import { cn as o } from "../../../utils/cn/cn.es.js";
import { useComplexImageCarousel as I } from "../useComplexImageCarousel.es.js";
import e from "../../../components/ComplexImageCarousel/ComplexCarousel/complexImageCarousel.module.css";
import { Typography as f } from "../../Typography/Typography.es.js";
import { ProgressButton as R } from "../../ProgressButton/ProgressButton.es.js";
const L = ({ images: a }) => {
  const {
    MOBILE_BREAKPOINT: n,
    containerRef: p,
    carouselRef: h,
    imageRefs: u,
    descriptionRef: g,
    descriptionItemRef: C,
    progressButtonContainerRef: N,
    visible: r,
    cardSizes: d,
    handleCustomPrevClick: v,
    handleCustomNextClick: w,
    current: b,
    mobileCardIndex: l,
    xLargeCardIndex: c
  } = I({ images: a });
  return /* @__PURE__ */ s("div", { className: e.root, children: [
    /* @__PURE__ */ s("div", { ref: p, className: e.container, children: [
      /* @__PURE__ */ i("div", { ref: h, className: e.carouselArea, children: r.length > 0 && r.map((y, t) => /* @__PURE__ */ i(
        "div",
        {
          className: o(e.slideContainer, e[`size-${d[t]}`]),
          ref: (m) => {
            m && (u.current[t] = m);
          },
          "data-flip-id": `slide-${(b + t) % a.length}`,
          "data-size": d[t],
          children: /* @__PURE__ */ i("img", { src: y.image, alt: `Slide ${t + 1}`, className: e.image })
        },
        t + 1
      )) }),
      /* @__PURE__ */ i("div", { ref: g, className: e.description, children: /* @__PURE__ */ s("div", { ref: C, className: o("description-item", e.descriptionItem), children: [
        /* @__PURE__ */ i(f, { as: "h3", defaultVariant: "headingLg", mobileVariant: "headingSm", children: typeof window != "undefined" && window.innerWidth <= n ? r[l].title : r[c].title }),
        /* @__PURE__ */ i(f, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", className: e.text, children: typeof window != "undefined" && window.innerWidth <= n ? r[l].description : r[c].description })
      ] }) })
    ] }),
    /* @__PURE__ */ i("div", { ref: N, className: e.progressButtonContainer, children: /* @__PURE__ */ i(
      R,
      {
        left: {
          onClick: v
        },
        right: {
          onClick: w
        },
        className: o("progress-buttons", e.progressButton)
      }
    ) })
  ] });
};
export {
  L as ComplexCarousel
};
