"use client";
import { j as o } from "../../../node_modules/.pnpm/react@19.1.0/node_modules/react/jsx-runtime.mjs";
import { Tooltip as h } from "@mantine/core";
import c from "../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.mjs";
import "react";
import { ReactComponent as x } from "../../assets/images/InfoIcon.svg.mjs";
import { ContainerIcons as m } from "../ContainerIcons/index.mjs";
import { ContainerRaised as d } from "../ContainerRaised/index.mjs";
import { PlatformIcon as f } from "../PlatformIcon/index.mjs";
import { getPlatformsBuiltFor as y } from "./helpers/getBuiltFor.mjs";
import { getPlatformsPlayableOn as j } from "./helpers/getPlayableOn.mjs";
import t from "./index.module.scss.mjs";
function R({
  platformsWithBuilds: a,
  i18n: e = {
    builtFor: "Built for:",
    playableOn: "Also Playable on:",
    builtForCaption: "Officially Supported Platform(s)",
    noExtraSetupNeeded: "No Extra Setup Needed",
    compatibilityInfoMessage: "HyperPlay's compatibility layer allows gameplay on these platforms."
  },
  classNames: i,
  className: u,
  ...b
}) {
  const s = [], l = [];
  a.length && (y(a).forEach(
    (r) => s.push(
      /* @__PURE__ */ o.jsx(
        f,
        {
          platform: r
        },
        `platforms-built-for-${r}`
      )
    )
  ), j(a).forEach(
    (r) => l.push(
      /* @__PURE__ */ o.jsx(
        f,
        {
          platform: r
        },
        `platforms-playable-on-for-${r}`
      )
    )
  ));
  let n = null;
  s.length && (n = /* @__PURE__ */ o.jsxs(
    d,
    {
      "data-testid": "platforms-supported-built-for-container",
      classNames: { container: t.containerRaised },
      children: [
        /* @__PURE__ */ o.jsx("div", { className: "title-sm", children: e.builtFor }),
        /* @__PURE__ */ o.jsx(m, { children: s }),
        /* @__PURE__ */ o.jsx("div", { className: "eyebrow", children: e.builtForCaption })
      ]
    }
  ));
  let p = null;
  return l.length && (p = /* @__PURE__ */ o.jsxs(
    d,
    {
      "data-testid": "platforms-supported-playable-on-container",
      classNames: { container: t.containerRaised },
      children: [
        /* @__PURE__ */ o.jsx("div", { className: "title-sm", children: e.playableOn }),
        /* @__PURE__ */ o.jsx(m, { children: l }),
        /* @__PURE__ */ o.jsxs("div", { className: t.noSetupContainer, children: [
          /* @__PURE__ */ o.jsx("div", { className: "eyebrow", children: e.noExtraSetupNeeded }),
          /* @__PURE__ */ o.jsx(
            h,
            {
              label: e.compatibilityInfoMessage,
              arrowSize: 14,
              withArrow: !0,
              position: "bottom",
              classNames: { tooltip: c("caption", t.tooltip) },
              "data-testid": "platforms-supported-info-popover",
              withinPortal: !1,
              transitionProps: { transition: "fade", duration: 300 },
              events: { hover: !0, touch: !0, focus: !1 },
              children: /* @__PURE__ */ o.jsx(
                "div",
                {
                  className: t.infoIconContainer,
                  "data-testid": "platforms-supported-info-icon",
                  children: /* @__PURE__ */ o.jsx(x, {})
                }
              )
            }
          )
        ] })
      ]
    }
  )), /* @__PURE__ */ o.jsxs("div", { className: c(t.root, i == null ? void 0 : i.root, u), ...b, children: [
    n,
    p
  ] });
}
export {
  R as PlatformsSupported
};
//# sourceMappingURL=index.mjs.map
