"use client";
import { j as e } from "../../../node_modules/.pnpm/react@19.1.0/node_modules/react/jsx-runtime.mjs";
import { Image as l } from "@mantine/core";
import t from "../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.mjs";
import M from "../../assets/fallback_achievement.svg.mjs";
import "react";
import { ReactComponent as z } from "../../assets/images/CheckmarkCircleOutline.svg.mjs";
import { ReactComponent as F } from "../../assets/images/Update.svg.mjs";
import G from "../AchievementNav/index.mjs";
import K from "../AchievementProgress/index.mjs";
import E from "../AchievementProgress/components/ProgressKey/index.mjs";
import O from "../AchievementProgress/helpers/getProgress.mjs";
import m from "../Button/index.mjs";
import W from "../Dropdowns/Dropdown/index.mjs";
import "../Dropdowns/GenericDropdown/index.mjs";
import "../Checkbox/index.mjs";
import "../Dropdowns/OptionsDropdown/OptionsDropdown.module.scss.mjs";
import q from "../Loading/index.mjs";
import s from "./GameAchievements.module.scss.mjs";
function ce({
  game: c,
  mintedAchievementsCount: n,
  totalAchievementsCount: d,
  mintableAchievementsCount: h,
  achievementNavProps: p,
  progressKeyProps: x,
  achievements: v,
  sortProps: u,
  paginationProps: j,
  achievementProgressProps: g,
  mintButtonProps: N,
  updateButtonProps: f,
  i18n: a = {
    lockedLabel: "Locked",
    unLockedLabel: "Unlocked",
    achievementsTitleLabel: "Achievements",
    mintButtonLabel: "Mint",
    updateButtonLabel: "Update"
  },
  loadingAchievements: b,
  gameCardImage: P,
  ...k
}) {
  const { safeMintedCount: i, safeTotalCount: r, mintedProgress: L, mintableProgress: w } = O({
    mintedAchievementsCount: n,
    totalAchievementsCount: d,
    mintableAchievementsCount: h
  }), { handleNextPage: y, handlePrevPage: C } = j, { totalToMint: B, ...I } = N ?? {}, { totalToUpdate: A, ...T } = f ?? {};
  return /* @__PURE__ */ e.jsxs("div", { className: s.container, ...k, children: [
    /* @__PURE__ */ e.jsxs("div", { className: s.hero, children: [
      /* @__PURE__ */ e.jsx(
        G,
        {
          ...p,
          nextButtonProps: {
            onClick: y
          },
          previousButtonProps: {
            onClick: C
          },
          showPreviousButton: !0,
          showGameAddButton: !0
        }
      ),
      /* @__PURE__ */ e.jsxs("div", { className: t(s.row, s.ctaContainer), children: [
        /* @__PURE__ */ e.jsx(
          m,
          {
            type: "secondary",
            size: "medium",
            spacing: "xs",
            rightIcon: /* @__PURE__ */ e.jsx("div", { className: t(s.rightIcon, s.mint), children: B ?? 0 }),
            ...I,
            children: a.mintButtonLabel
          }
        ),
        /* @__PURE__ */ e.jsx(
          m,
          {
            type: "alert",
            size: "medium",
            leftIcon: /* @__PURE__ */ e.jsx(F, { width: 16, height: 16 }),
            spacing: "xs",
            rightIcon: /* @__PURE__ */ e.jsx("div", { className: t(s.rightIcon, s.update), children: A ?? 0 }),
            ...T,
            children: a.updateButtonLabel
          }
        )
      ] }),
      /* @__PURE__ */ e.jsxs("div", { className: s.heroRow, children: [
        /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(
          l,
          {
            src: P,
            className: s.gameCardImageContainer
          }
        ) }),
        /* @__PURE__ */ e.jsxs("div", { className: s.progress, children: [
          /* @__PURE__ */ e.jsx("h6", { className: s.title, children: c.title }),
          /* @__PURE__ */ e.jsx(
            K,
            {
              safeMintedCount: i,
              safeTotalCount: r,
              mintedProgress: L,
              mintableProgress: w,
              ...g
            }
          ),
          /* @__PURE__ */ e.jsx(
            E,
            {
              className: s.progressKey,
              safeMintedCount: i,
              safeTotalCount: r,
              ...x
            }
          )
        ] })
      ] })
    ] }),
    /* @__PURE__ */ e.jsxs("div", { className: s.achievements, children: [
      /* @__PURE__ */ e.jsxs("div", { className: s.row, children: [
        /* @__PURE__ */ e.jsx(
          "div",
          {
            className: t(
              s.colorNeutral400,
              "text--2xl",
              "weight--semibold"
            ),
            style: { fontFamily: "var(--primary-font-family)" },
            children: a.achievementsTitleLabel
          }
        ),
        /* @__PURE__ */ e.jsx(
          W,
          {
            targetWidth: 300,
            dropdownButtonDivProps: {
              className: "title-sm"
            },
            ...u
          }
        )
      ] }),
      /* @__PURE__ */ e.jsx("div", { className: s.list, children: b ? /* @__PURE__ */ e.jsx(q, {}) : v.map(({ id: R, title: S, description: U, image: D, isLocked: o }) => /* @__PURE__ */ e.jsxs(
        "div",
        {
          className: t(s.row, o ? s.locked : ""),
          children: [
            /* @__PURE__ */ e.jsxs("div", { className: s.achievementData, children: [
              /* @__PURE__ */ e.jsx(
                l,
                {
                  unstyled: !0,
                  className: s.image,
                  src: D,
                  fallbackSrc: M
                }
              ),
              /* @__PURE__ */ e.jsxs("div", { className: s.achievementInfo, children: [
                /* @__PURE__ */ e.jsx("div", { className: "text--lg weight--medium", children: S }),
                /* @__PURE__ */ e.jsx("div", { className: t(s.colorNeutral400, "text--md"), children: U })
              ] })
            ] }),
            /* @__PURE__ */ e.jsx(
              "div",
              {
                className: t(
                  s.colorNeutral400,
                  s.achievementState,
                  "text--sm"
                ),
                children: o ? /* @__PURE__ */ e.jsx("div", { children: a.lockedLabel }) : /* @__PURE__ */ e.jsxs("div", { className: s.unlocked, children: [
                  /* @__PURE__ */ e.jsx("div", { children: a.unLockedLabel }),
                  /* @__PURE__ */ e.jsx(z, { width: 21, height: 21 })
                ] })
              }
            )
          ]
        },
        R
      )) })
    ] })
  ] });
}
export {
  ce as default
};
//# sourceMappingURL=index.mjs.map
