import { jsx as V } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { useRef as s, useMemo as h } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import { SummaryItem as C } from "../SummaryItem/SummaryItem.js";
import k from "../../../../../core/Context/preact/useCoreContext.js";
const d = ({
  balance: e,
  hiddenField: r,
  isHeader: l = !1,
  showLabelUnderline: n = !1,
  isSkeleton: u = !1,
  isLoading: i = !1,
  widths: m,
  onWidthsSet: f,
  availableBalanceElemId: a,
  reservedBalanceElemId: o
}) => {
  const { i18n: t } = k(), c = s(null), v = s(null), g = s(null), y = h(() => {
    const p = {
      elemId: a,
      labelKey: "transactions.overview.balances.tags.available",
      ref: c,
      skeletonWidth: 80,
      getValue: () => e && t.amount(e.value, e.currency),
      get ariaLabel() {
        return `${t.get(this.labelKey)}: ${this.getValue()}`;
      }
    }, b = {
      elemId: o,
      labelKey: "transactions.overview.balances.tags.reserved",
      ref: v,
      skeletonWidth: 80,
      getValue: () => e && t.amount(e.reservedValue, e.currency),
      tooltipLabel: "transactions.overview.balances.tags.reserved.description",
      get ariaLabel() {
        return `${t.get(this.labelKey)}: ${this.getValue()}`;
      }
    };
    return [
      ...r !== "available" ? [p] : [],
      ...r !== "reserved" ? [b] : [],
      {
        ref: g,
        skeletonWidth: 40,
        valueHasLabelStyle: !0,
        getValue: () => e?.currency
      }
    ];
  }, [e, r, t, a, o]);
  return /* @__PURE__ */ V(
    C,
    {
      showLabelUnderline: n,
      isEmpty: !e,
      columnConfigs: y,
      isHeader: l,
      isSkeletonVisible: u,
      isLoading: i,
      widths: m,
      onWidthsSet: f
    }
  );
};
export {
  d as BalanceItem
};
