import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import C from "classnames";
import p from "../Typography/Typography.js";
import { TypographyVariant as g, TypographyElement as M } from "../Typography/types.js";
import { useCallback as S } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
/* empty css                         */
import D from "../../../core/Context/preact/useCoreContext.js";
import { Fragment as y } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
import _ from "../Button/Button.js";
const t = "adyen-pe-error-message-display", f = 680, s = {
  base: t,
  base_absolutePosition: t + "--absolute-position",
  base_centered: t + "--centered",
  base_outlined: t + "--outlined",
  base_withBackground: t + "--with-background",
  base_withHeaderOffset: t + "--with-header-offset",
  base_condensed: t + "--condensed",
  button: t + "__button",
  illustration: t + "__illustration"
}, F = () => /* @__PURE__ */ e(y, { children: [
  " ",
  /* @__PURE__ */ e("br", {}),
  " "
] }), V = ({
  title: w,
  message: c,
  imageDesktop: i,
  imageMobile: d,
  withImage: v,
  centered: x,
  refreshComponent: l,
  onRefreshComponent: E,
  onContactSupport: r,
  translationValues: m,
  absolutePosition: A = !0,
  outlined: b = !0,
  renderSecondaryButton: o,
  withBackground: k,
  withHeaderOffset: I,
  condensed: T,
  testId: O = "error-message-display"
}) => {
  const { i18n: a, updateCore: B, getImageAsset: u } = D(), N = S(
    (n) => Array.isArray(n) ? n.map((h, P) => /* @__PURE__ */ e(y, { children: [
      P > 0 && /* @__PURE__ */ e(F, {}),
      a.get(h),
      m?.[h]
    ] })) : a.get(n),
    [a, m]
  );
  return /* @__PURE__ */ e(
    "div",
    {
      "data-testid": O,
      className: C(s.base, {
        [s.base_absolutePosition]: A,
        [s.base_centered]: x,
        [s.base_outlined]: b,
        [s.base_withBackground]: k !== !1 && !b,
        [s.base_withHeaderOffset]: I,
        [s.base_condensed]: T
      }),
      children: [
        (i || d || v) && /* @__PURE__ */ e("div", { className: s.illustration, children: /* @__PURE__ */ e("picture", { children: [
          /* @__PURE__ */ e(
            "source",
            {
              "data-testid": "source-desktop",
              type: "image/svg+xml",
              media: `(min-width: ${f}px)`,
              srcSet: i
            }
          ),
          /* @__PURE__ */ e(
            "source",
            {
              "data-testid": "source-mobile",
              type: "image/svg+xml",
              media: `(max-width: ${f}px)`,
              srcSet: d ?? u?.({ name: "wrong-environment", subFolder: "images/small" })
            }
          ),
          /* @__PURE__ */ e("img", { srcSet: i ?? u?.({ name: "wrong-environment" }), alt: "" })
        ] }) }),
        /* @__PURE__ */ e(p, { el: M.DIV, variant: g.TITLE, children: a.get(w) }),
        c && /* @__PURE__ */ e(p, { variant: g.BODY, children: N(c) }),
        (r || l || o) && /* @__PURE__ */ e("div", { className: s.button, children: [
          o && o(),
          r && /* @__PURE__ */ e(_, { onClick: r, children: a.get("common.actions.contactSupport.labels.reachOut") }),
          !r && l && /* @__PURE__ */ e(_, { onClick: E ?? B, children: a.get("common.actions.refresh.labels.default") })
        ] })
      ]
    }
  );
};
export {
  V as ErrorMessageDisplay,
  f as IMAGE_BREAKPOINT_MEDIUM_PX
};
