import { jsxs as r, jsx as l } from "react/jsx-runtime";
import f from "lodash/upperFirst";
import { Box as i } from "@mui/material";
import x from "@arcblock/icons/lib/RevokeIcon";
import y from "../NFTDisplay/index.js";
import { useLocaleContext as u } from "../Locale/context.js";
function b({
  passport: e,
  user: a,
  color: n,
  width: t = 150,
  icon: s = null,
  createPassportSvg: o,
  // inherit props
  children: d,
  ...m
}) {
  const { t: c } = u();
  return /* @__PURE__ */ r(
    i,
    {
      ...m,
      sx: {
        display: "flex",
        alignItems: "center",
        ...m?.sx
      },
      children: [
        !!e.display && /* @__PURE__ */ l(i, { className: "passport-item__display", sx: { width: t }, children: /* @__PURE__ */ l(
          y,
          {
            address: e.id,
            data: e.display,
            imageFilter: typeof t == "number" ? { imageFilter: "resize", w: t } : null
          }
        ) }),
        !e.display && /* @__PURE__ */ l(
          i,
          {
            className: "passport-item__display",
            dangerouslySetInnerHTML: {
              __html: o({
                title: e.scope === "kyc" ? e.name : e.title,
                issuer: e.issuer && e.issuer.name,
                issuerDid: e.issuer && e.issuer.id,
                ownerName: a.fullName,
                ownerDid: a.did,
                ownerAvatarUrl: a.avatar,
                revoked: e.revoked,
                scope: e.scope,
                role: e.role,
                display: e.display,
                preferredColor: n,
                width: t
              })
            }
          }
        ),
        /* @__PURE__ */ r(
          i,
          {
            className: "passport-item__body",
            sx: {
              p: 0,
              ml: 3,
              mt: 0
            },
            children: [
              /* @__PURE__ */ r(
                i,
                {
                  className: "passport-item__title",
                  sx: {
                    display: "flex",
                    alignItems: "center",
                    fontWeight: 400,
                    fontSize: "16px",
                    lineHeight: 1.1875,
                    color: "text.primary"
                  },
                  children: [
                    f(e.title),
                    /* @__PURE__ */ r(
                      i,
                      {
                        className: "passport-item__status-icon",
                        sx: {
                          svg: {
                            fill: "#bfbfbf",
                            height: "1.2em",
                            marginLeft: "0.4em"
                          }
                        },
                        children: [
                          s,
                          e.revoked && /* @__PURE__ */ l(x, {})
                        ]
                      }
                    )
                  ]
                }
              ),
              e.expirationDate && /* @__PURE__ */ l(
                i,
                {
                  className: "passport-item__title",
                  sx: {
                    display: "flex",
                    alignItems: "center",
                    fontWeight: 400,
                    fontSize: "16px",
                    lineHeight: 1.1875,
                    color: "text.primary"
                  },
                  children: c("team.passport.validUntil", { date: e.expirationDate })
                }
              ),
              d
            ]
          }
        )
      ]
    }
  );
}
export {
  b as default
};
