"use client";
import { j as t } from "../../../node_modules/.pnpm/react@19.1.0/node_modules/react/jsx-runtime.mjs";
import { useState as y, useRef as M, useEffect as P } from "react";
import { Carousel as C } from "@mantine/carousel";
import i from "../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.mjs";
import k from "embla-carousel-autoplay";
import { ReactComponent as D } from "../../assets/images/Line.svg.mjs";
import L from "../Button/index.mjs";
import r from "./QuestsBanner.module.scss.mjs";
const F = ({
  classNames: n,
  list: e = [],
  canAutoRotate: g = !0,
  autoplayDelayInMs: I = 6e3,
  carousel: j,
  onPageChangeTap: T
}) => {
  const [p, v] = y(0), d = e.length > 1, h = M(
    k({ delay: I, stopOnInteraction: !1 })
  ), [f, E] = y(), w = (o) => {
    f == null || f.scrollTo(o), v(o), T(o);
  };
  return P(() => {
    f && d && (g ? h.current.play() : h.current.stop());
  }, [f, g, d]), /* @__PURE__ */ t.jsxs(
    "div",
    {
      className: i(r.root, n == null ? void 0 : n.root),
      style: {
        "--banner-carousel-width": j == null ? void 0 : j.width
      },
      children: [
        /* @__PURE__ */ t.jsx(
          "div",
          {
            className: i(
              r.bannerImageContainer,
              n == null ? void 0 : n.bannerImageContainer
            ),
            children: e[p] && e[p].bannerImageUrl ? /* @__PURE__ */ t.jsx(
              "img",
              {
                src: e[p].bannerImageUrl,
                className: i(r.bannerImage, n == null ? void 0 : n.bannerImage)
              }
            ) : null
          }
        ),
        /* @__PURE__ */ t.jsxs("div", { className: i(r.content, n == null ? void 0 : n.content), children: [
          /* @__PURE__ */ t.jsx("div", { className: i(r.carouselWrapper), children: /* @__PURE__ */ t.jsx(
            C,
            {
              getEmblaApi: (o) => d ? E(o) : void 0,
              classNames: {
                slide: i(r.slide, n == null ? void 0 : n.slide)
              },
              onSlideChange: (o) => {
                v(o);
              },
              plugins: d ? [h.current] : [],
              onMouseEnter: () => {
                g && d && h.current.stop();
              },
              onMouseLeave: () => {
                g && d && (h.current.stop(), h.current.play());
              },
              withControls: !1,
              withIndicators: !1,
              children: e == null ? void 0 : e.map(
                ({
                  title: o,
                  description: u,
                  buttonText: B,
                  onButtonTap: S,
                  buttonContainer: b
                }, x) => /* @__PURE__ */ t.jsx(
                  C.Slide,
                  {
                    className: i(
                      r.slideItem,
                      n == null ? void 0 : n.slideItem,
                      x === p ? r.active : r.inactive
                    ),
                    children: /* @__PURE__ */ t.jsxs("div", { className: i(r.details, n == null ? void 0 : n.details), children: [
                      /* @__PURE__ */ t.jsxs(
                        "div",
                        {
                          className: i(
                            r.contentText,
                            n == null ? void 0 : n.contentText
                          ),
                          children: [
                            /* @__PURE__ */ t.jsx(
                              "div",
                              {
                                className: i(
                                  "h5",
                                  r.bannerTitle,
                                  n == null ? void 0 : n.bannerTitle
                                ),
                                children: o
                              }
                            ),
                            /* @__PURE__ */ t.jsx(
                              "div",
                              {
                                className: i(
                                  "body",
                                  r.bannerDescription,
                                  n == null ? void 0 : n.bannerDescription
                                ),
                                children: u
                              }
                            )
                          ]
                        }
                      ),
                      b || /* @__PURE__ */ t.jsx(
                        L,
                        {
                          type: "primary",
                          size: "medium",
                          onClick: S,
                          className: i(
                            r.bannerButton,
                            n == null ? void 0 : n.bannerButton
                          ),
                          children: B
                        }
                      )
                    ] })
                  },
                  x
                )
              )
            }
          ) }),
          /* @__PURE__ */ t.jsx(
            "div",
            {
              className: i(
                r.paginitionContainer,
                n == null ? void 0 : n.paginitionContainer
              ),
              children: d ? Array.from({ length: e.length }).map((o, u) => /* @__PURE__ */ t.jsx(
                D,
                {
                  onClick: () => w(u),
                  className: i(
                    r.line,
                    n == null ? void 0 : n.indicator,
                    u === p ? r.activateIndicator : "",
                    u === p ? n == null ? void 0 : n.activateIndicator : ""
                  )
                },
                `quests-banner-pagination-${u}`
              )) : null
            }
          )
        ] })
      ]
    }
  );
};
export {
  F as QuestsBanner,
  F as default
};
//# sourceMappingURL=index.mjs.map
