import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
/* empty css                   */
import { useMemo as c } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import p from "../../../utils/random/uniqueId.js";
import r from "../Typography/Typography.js";
import { TypographyVariant as l } from "../Typography/types.js";
import b from "classnames";
import N from "../../../core/Context/preact/useCoreContext.js";
import y from "../Slider/Slider.js";
const E = ({
  dynamicOffersConfig: a,
  value: i = a.minAmount.value,
  onValueChange: h,
  onRelease: v,
  className: x
}) => {
  const s = c(() => p("elem"), []), n = c(() => p("elem"), []), { i18n: t } = N(), d = c(
    () => t.amount(i, a.minAmount.currency, { maximumFractionDigits: 0 }),
    [t, i, a.minAmount.currency]
  ), A = (m) => {
    const u = Number(m.target.value);
    h?.(u);
  }, o = (m) => {
    const u = Number(m.target.value);
    v?.(u);
  };
  return /* @__PURE__ */ e("div", { className: b("adyen-pe-capital-slider", x), children: [
    /* @__PURE__ */ e("label", { id: s, htmlFor: n, className: "adyen-pe-capital-slider__label", role: "presentation", children: /* @__PURE__ */ e(r, { variant: l.BODY, stronger: !0, children: t.get("capital.offer.selection.slider.a11y.label") }) }),
    /* @__PURE__ */ e("div", { children: [
      /* @__PURE__ */ e("output", { "aria-labelledby": s, htmlFor: n, className: "adyen-pe-capital-slider__value", "aria-live": "polite", children: /* @__PURE__ */ e(r, { variant: l.TITLE, strongest: !0, children: d }) }),
      /* @__PURE__ */ e(
        y,
        {
          id: n,
          value: i,
          min: a.minAmount.value,
          max: a.maxAmount.value,
          step: a.step,
          onChange: A,
          onMouseUp: o,
          onTouchEnd: o,
          onKeyUp: o,
          className: "adyen-pe-capital-slider__input",
          "aria-valuetext": d
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: "adyen-pe-capital-slider__labels", "aria-hidden": "true", children: [
      /* @__PURE__ */ e("div", { children: [
        /* @__PURE__ */ e(r, { variant: l.CAPTION, children: t.get("capital.offer.selection.slider.markers.min") }),
        /* @__PURE__ */ e(r, { variant: l.BODY, children: t.amount(a.minAmount.value, a.minAmount.currency, { maximumFractionDigits: 0 }) })
      ] }),
      /* @__PURE__ */ e("div", { children: [
        /* @__PURE__ */ e(r, { variant: l.CAPTION, children: t.get("capital.offer.selection.slider.markers.max") }),
        /* @__PURE__ */ e(r, { variant: l.BODY, children: t.amount(a.maxAmount.value, a.maxAmount.currency, { maximumFractionDigits: 0 }) })
      ] })
    ] })
  ] });
};
export {
  E as default
};
