"use client";
import { j as r } from "../../../node_modules/.pnpm/react@19.1.0/node_modules/react/jsx-runtime.mjs";
import { useState as c, useRef as P, useEffect as d, useCallback as u } from "react";
import k from "embla-carousel-react";
import l from "./RewardsSection.module.scss.mjs";
import q from "../RewardsCard/index.mjs";
import b from "../ArrowCircularButton/index.mjs";
import { dummyData as y } from "./constants.mjs";
import m from "../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.mjs";
const L = {
  header: "Complete Quests to Earn These Rewards"
}, v = {
  align: "start",
  dragFree: !0,
  loop: !1,
  slidesToScroll: 3
}, F = ({
  rewards: o,
  Link: S,
  isLoading: s,
  classNames: i,
  i18n: j = L
}) => {
  const [f, R] = c(3), a = P(null), [I, e] = k(v), [T, C] = c(!1), [g, h] = c(!1);
  d(() => {
    let t;
    return s ? t = setTimeout(() => {
      h(!0);
    }, 5e3) : h(!1), () => {
      t && clearTimeout(t);
    };
  }, [s]), s && (o = y);
  const w = u(() => {
    e && (e.canScrollPrev() ? e.scrollPrev() : e.scrollTo(e.scrollSnapList().length - 1));
  }, [e]), B = u(() => {
    e && (e.canScrollNext() ? e.scrollNext() : e.scrollTo(0));
  }, [e]), n = u(() => {
    if (!e || !a.current)
      return;
    const t = a.current.offsetWidth, x = a.current.querySelectorAll(
      `.${l.emblaSlide}`
    );
    if (x.length === 0)
      return;
    const E = x[0].getBoundingClientRect().width, p = Math.max(1, Math.floor(t / E));
    R(p), e && e.reInit({
      ...v,
      slidesToScroll: p
    });
  }, [e]);
  return d(() => {
    if (!e)
      return;
    n();
    const t = () => {
      n();
    };
    return window.addEventListener("resize", t), () => {
      window.removeEventListener("resize", t);
    };
  }, [e, n]), d(() => {
    e && (C(
      e.canScrollNext() || e.canScrollPrev() || o.length > f
    ), n());
  }, [e, o, f, n]), !o || o.length === 0 || s && g ? null : /* @__PURE__ */ r.jsxs(
    "div",
    {
      className: m(l.rewardsSection, i == null ? void 0 : i.root),
      "data-testid": "rewards-section",
      ref: a,
      children: [
        /* @__PURE__ */ r.jsxs("div", { className: l.header, "data-testid": "rewards-header", children: [
          /* @__PURE__ */ r.jsx("div", { className: "title", children: j.header }),
          T && /* @__PURE__ */ r.jsxs("div", { className: l.navigationIcons, children: [
            /* @__PURE__ */ r.jsx(
              b,
              {
                classNames: { root: l.leftButton },
                isLeftButton: !0,
                onClick: w,
                "data-testid": "arrow-button"
              }
            ),
            /* @__PURE__ */ r.jsx(
              b,
              {
                classNames: { root: l.rightButton },
                onClick: B,
                isLeftButton: !1,
                "data-testid": "arrow-button"
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ r.jsx("div", { className: l.embla, children: /* @__PURE__ */ r.jsx("div", { className: l.emblaViewport, ref: I, children: /* @__PURE__ */ r.jsx("div", { className: m(l.emblaContainer, i == null ? void 0 : i.container), children: o.map((t) => /* @__PURE__ */ r.jsx(
          "div",
          {
            className: m(l.emblaSlide, i == null ? void 0 : i.slide),
            children: /* @__PURE__ */ r.jsx(
              S,
              {
                "data-testid": "reward-link",
                href: `/quests/${t.questId}`,
                children: /* @__PURE__ */ r.jsx(
                  q,
                  {
                    id: t.id,
                    questId: t.questId,
                    rewardImage: t.rewardImage,
                    rewardType: t.rewardType,
                    claimsLeft: t.claimsLeft,
                    rewardName: t.rewardName,
                    amountPerUser: t.amountPerUser,
                    isLoading: s,
                    decimals: t.decimals
                  }
                )
              }
            )
          },
          t.id
        )) }) }) })
      ]
    }
  );
};
export {
  F as default
};
//# sourceMappingURL=index.mjs.map
