import { jsx as l, jsxs as o } from "react/jsx-runtime";
import { Typography as g } from "@mui/material";
import i from "lodash/isUndefined";
import x from "./images/abtwallet.png";
import { mergeProps as y } from "../Util/index.js";
import c from "../Colors/themes/default.js";
import _ from "../Button/index.js";
import { styled as h } from "../Theme/index.js";
function u(t) {
  const e = Object.assign({}, t);
  i(e.action) && (e.action = "Login"), i(e.textLayout) && (e.textLayout = "vertical"), i(e.size) && (e.size = "medium"), i(e.style) && (e.style = {});
  const m = y(e, u, ["style"]), { action: n, size: p, textLayout: s, style: f = {}, ...d } = m, r = Object.assign({}, f, { border: "none", padding: 0 });
  return /* @__PURE__ */ l(_, { style: r, ...d, variant: "outlined", children: /* @__PURE__ */ o(w, { size: p, color: r.color, children: [
    /* @__PURE__ */ l("img", { src: x, className: "wallet-action__logo", alt: "DID Wallet" }),
    s === "vertical" && /* @__PURE__ */ o(g, { className: "wallet-action__text", component: "div", children: [
      /* @__PURE__ */ o("span", { className: "wallet-action__action", children: [
        n,
        " with"
      ] }),
      /* @__PURE__ */ l("span", { className: "wallet-action__title", children: "DID Wallet" })
    ] }),
    s === "horizontal" && /* @__PURE__ */ o("span", { className: "wallet-action__title", style: { padding: 8 }, children: [
      n,
      " with DID Wallet"
    ] })
  ] }) });
}
const a = {
  logo: {
    small: 32,
    medium: 44,
    large: 56,
    xlarge: 88
  },
  font: {
    small: 9,
    medium: 11,
    large: 13,
    xlarge: 18
  }
}, w = h("div")`
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    opacity: 0.9;
  }

  .wallet-action__logo {
    width: auto;
    height: auto;
    max-width: ${(t) => a.logo[t.size]}px;
    margin-left: 5px;
  }

  .wallet-action__text {
    padding: 8px;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .wallet-action__action {
    font-size: ${(t) => a.font[t.size]}px;
    text-transform: capitalize;
    margin-bottom: 1px;
    color: ${(t) => t.color || c.primary.main};
    letter-spacing: 1px;
  }

  .wallet-action__title {
    font-size: ${(t) => a.font[t.size] * 1.5}px;
    text-transform: capitalize;
    color: ${(t) => t.color || c.primary.main};
    letter-spacing: 1px;
  }
`;
export {
  u as default
};
