"use client";
import { j as s } from "../../../node_modules/.pnpm/react@19.1.0/node_modules/react/jsx-runtime.mjs";
import { useState as C } from "react";
import { chainMap as g } from "../../../node_modules/.pnpm/@hyperplay_chains@0.5.0_typescript@5.8.3_zod@3.25.76/node_modules/@hyperplay/chains/dist/index.es.mjs";
import { Tooltip as w, Popover as r } from "@mantine/core";
import B from "../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.mjs";
import o from "./BlockchainsStack.module.scss.mjs";
import p from "../BlockchainIcon/index.mjs";
const L = ({
  chainId: h = [],
  title: d = "BLOCKCHAIN(S):",
  maxVisible: a = 5,
  showMoreCount: v = !0,
  className: u,
  Image: i = "img",
  ipfsBaseUrl: t = "https://ipfs.io/ipfs/",
  i18n: j = {
    chainId: "Chain id"
  },
  ...x
}) => {
  const [N, l] = C(!1), c = h.map((e) => {
    const n = g[e];
    return {
      name: (n == null ? void 0 : n.chain.name) || `${j.chainId}: ${e}`,
      chainId: e
    };
  }), I = c.slice(0, a), m = c.length - a, f = m > 0, k = c.slice(a);
  return /* @__PURE__ */ s.jsxs("div", { className: B(o.blockchains, u), ...x, children: [
    /* @__PURE__ */ s.jsx("span", { className: o.title, children: d }),
    /* @__PURE__ */ s.jsxs("div", { className: o.blockchainIcons, children: [
      I.map((e, n) => /* @__PURE__ */ s.jsx(
        w,
        {
          label: e.name,
          className: o.tooltip,
          events: { hover: !0, touch: !0, focus: !1 },
          children: /* @__PURE__ */ s.jsx("div", { className: o.icon, children: /* @__PURE__ */ s.jsx(
            p,
            {
              chainId: e.chainId,
              ipfsBaseUrl: t,
              ImageComponent: i,
              className: o.blockchainSvg
            }
          ) })
        },
        `blockchain-${n}`
      )),
      f && v && /* @__PURE__ */ s.jsxs(
        r,
        {
          opened: N,
          position: "top",
          withArrow: !0,
          classNames: {
            dropdown: o.popover,
            arrow: o.popoverArrow
          },
          children: [
            /* @__PURE__ */ s.jsx(r.Target, { children: /* @__PURE__ */ s.jsx(
              "div",
              {
                className: o.more,
                "data-testid": "blockchain-more-button",
                onMouseEnter: () => l(!0),
                onMouseLeave: () => l(!1),
                children: /* @__PURE__ */ s.jsxs("span", { className: o.moreCount, children: [
                  "+",
                  m
                ] })
              }
            ) }),
            /* @__PURE__ */ s.jsx(r.Dropdown, { children: /* @__PURE__ */ s.jsx("div", { className: o.popoverContent, children: k.map((e, n) => /* @__PURE__ */ s.jsxs(
              "div",
              {
                className: o.popoverItem,
                children: [
                  /* @__PURE__ */ s.jsx(
                    p,
                    {
                      chainId: e.chainId,
                      ipfsBaseUrl: t,
                      ImageComponent: i,
                      className: o.popoverIcons
                    }
                  ),
                  /* @__PURE__ */ s.jsx("span", { className: o.popoverBlockchainsName, children: e.name })
                ]
              },
              `remaining-${n}`
            )) }) })
          ]
        }
      )
    ] })
  ] });
};
export {
  L as default
};
//# sourceMappingURL=index.mjs.map
