import { jsxs as o, jsx as t } from "react/jsx-runtime";
import { useTheme as m, useMediaQuery as x, Box as r, Typography as a, Chip as f } from "@mui/material";
import h from "lodash/noop";
import s from "../../RelativeTime/index.js";
import g from "../../WalletOSIcon/index.js";
import { DID as u } from "../../DID/index.js";
import v from "../../Avatar/index.js";
import { getSourceProvider as y } from "../libs/utils.js";
function T({
  userSession: e,
  locale: i = "en",
  onClick: l = h
}) {
  const { palette: n } = m(), d = x((p) => p.breakpoints.down("md")), c = y(e?.user) === "wallet";
  return /* @__PURE__ */ o(
    r,
    {
      sx: {
        p: 2,
        transition: "background-color 0.5s",
        bgcolor: "background.paper",
        "&:hover, &:active": {
          backgroundColor: "action.hover"
        },
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        cursor: "pointer",
        "&:hover": {
          backgroundColor: "action.hover"
        },
        width: "100%"
      },
      onClick: l,
      children: [
        /* @__PURE__ */ o(
          r,
          {
            sx: {
              display: "flex",
              alignItems: "center",
              gap: 1.5,
              flex: 1,
              overflow: "hidden"
            },
            children: [
              /* @__PURE__ */ t(v, { src: e.user.avatar, did: e.user.did, size: 44, variant: "circle", shape: "circle" }),
              /* @__PURE__ */ o(r, { sx: { flex: 1, overflow: "hidden" }, children: [
                /* @__PURE__ */ o(
                  a,
                  {
                    component: r,
                    sx: {
                      fontSize: "16px",
                      fontWeight: 500,
                      display: "flex",
                      alignItems: "center",
                      gap: 1,
                      color: "text.primary"
                    },
                    children: [
                      e.user.fullName,
                      /* @__PURE__ */ t(
                        f,
                        {
                          label: e.user?.roleTitle || e.user?.role,
                          size: "small",
                          variant: "outlined",
                          sx: () => ({
                            height: "auto",
                            fontWeight: "bold",
                            fontSize: "12px",
                            borderColor: "grey.300",
                            color: "text.secondary"
                          })
                        }
                      )
                    ]
                  }
                ),
                c ? /* @__PURE__ */ o(
                  r,
                  {
                    sx: {
                      display: "flex",
                      alignItems: "center",
                      gap: 0.5
                    },
                    children: [
                      /* @__PURE__ */ t(
                        g,
                        {
                          provider: e?.extra?.provider,
                          walletOS: e?.extra?.walletOS,
                          color: n.text.secondary
                        }
                      ),
                      /* @__PURE__ */ t(
                        u,
                        {
                          locale: i,
                          did: e.user.did,
                          size: 12,
                          sx: {
                            lineHeight: 1,
                            fontSize: "12px",
                            mt: 0.5,
                            "& span.arc-avatar-did-motif": {
                              display: "none !important"
                            }
                          },
                          compact: !0
                        }
                      )
                    ]
                  }
                ) : /* @__PURE__ */ t(a, { sx: { fontSize: "12px", color: "text.secondary" }, children: e.user.email })
              ] })
            ]
          }
        ),
        e.updatedAt && !d && /* @__PURE__ */ t(r, { component: "span", sx: { color: "text.hint", fontSize: "12px", flexShrink: 0 }, children: /* @__PURE__ */ t(s, { value: e.updatedAt, locale: i }) })
      ]
    }
  );
}
export {
  T as default
};
