import { PaymentProvider as m } from "./accelbyte-widgets494.mjs";
import p from "./accelbyte-widgets679.mjs";
import d from "./accelbyte-widgets680.mjs";
import f from "./accelbyte-widgets681.mjs";
import u from "./accelbyte-widgets682.mjs";
import y from "./accelbyte-widgets683.mjs";
import n from "classnames";
import t, { useState as A, useEffect as g } from "react";
import e from "./accelbyte-widgets684.mjs";
const v = {
  [m.enum.PAYPAL]: { image: f, text: "PayPal" },
  [m.enum.ALIPAY]: { image: p, text: "Ali Pay" },
  [m.enum.STRIPE]: { image: d, text: "Credit Card", classNames: e.creditCard },
  [m.enum.WXPAY]: { image: y, text: "WxPay" }
};
function x(i) {
  const r = v[i];
  return r || {
    image: u,
    text: "Other Methods",
    classNames: e.wallet
  };
}
const Y = ({ paymentMethods: i, activePaymentMethod: r, onPaymentMethodChange: l, disabled: s }) => {
  const [c, P] = A(s);
  return g(() => {
    P(s);
  }, [s]), /* @__PURE__ */ t.createElement(t.Fragment, null, i.map((a) => {
    const o = x(a.paymentProvider);
    return /* @__PURE__ */ t.createElement(
      "div",
      {
        key: `payment-method-checkbox-${a.paymentProvider}`,
        onClick: () => l(a),
        className: n(e.option, {
          [e.active]: r === a,
          [e.disabled]: c
        })
      },
      /* @__PURE__ */ t.createElement("div", { className: n(e.image, o.classNames) }, /* @__PURE__ */ t.createElement("img", { src: o.image, alt: a.paymentProvider })),
      /* @__PURE__ */ t.createElement("div", { className: e.text }, o.text)
    );
  }));
};
export {
  Y as default
};
