import { jsx as r } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import f from "classnames";
import e from "../../../../internal/Typography/Typography.js";
import { TypographyVariant as o, TypographyElement as m } from "../../../../internal/Typography/types.js";
import { Tooltip as g } from "../../../../internal/Tooltip/Tooltip.js";
import { useMemo as c } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import { classes as t } from "./constants.js";
/* empty css                   */
import N from "../../../../../core/Context/preact/useCoreContext.js";
import { Icon as P } from "../../../../internal/Icon/Icon.js";
const U = ({ amount: p, currency: n, description: s, label: l, large: a }) => {
  const { i18n: i } = N(), [u, T] = c(() => {
    const h = a ? { variant: o.TITLE, large: !0 } : { variant: o.SUBTITLE, stronger: !0 }, d = a ? { variant: o.SUBTITLE, stronger: !0 } : { variant: o.CAPTION, stronger: !0 };
    return [h, d];
  }, [a]), y = c(() => i.amount(p, n), [i, p, n]);
  return /* @__PURE__ */ r("div", { className: t.root, children: [
    /* @__PURE__ */ r("div", { className: t.label, children: [
      /* @__PURE__ */ r(e, { el: m.SPAN, variant: o.CAPTION, children: l }),
      s && /* @__PURE__ */ r(g, { content: s, children: /* @__PURE__ */ r("span", { children: /* @__PURE__ */ r(P, { name: "info" }) }) })
    ] }),
    /* @__PURE__ */ r("div", { className: f(t.amount, { [t.amountLarge]: a }), children: [
      /* @__PURE__ */ r(e, { el: m.SPAN, ...u, children: y }),
      /* @__PURE__ */ r(e, { el: m.SPAN, className: t.currency, ...T, children: n })
    ] })
  ] });
};
export {
  U as default
};
