import { jsxs as i, jsx as e, Fragment as u } from "react/jsx-runtime";
import { useTheme as b, Box as t, Tooltip as _, Typography as a } from "@mui/material";
import { Icon as p } from "@iconify/react";
import { isValidElement as I } from "react";
import o from "prop-types";
import S from "lodash/noop";
import { mergeSx as d } from "@arcblock/ux/lib/Util/style";
import { LOGIN_PROVIDER_ICON_SIZE as f } from "@arcblock/ux/lib/Util/constant";
import N from "@iconify-icons/material-symbols/arrow-right-alt-rounded";
function R({
  isLatest: r = !1,
  title: l,
  description: s = null,
  icon: n,
  iconScale: h = 0.95,
  slotProps: g = {},
  mode: x = "normal",
  t: y = S,
  ...c
}) {
  const m = b();
  return /* @__PURE__ */ i(
    t,
    {
      ...c,
      className: "arc-login-item",
      sx: d(
        {
          position: "relative",
          display: "flex",
          alignItems: "center",
          gap: 1,
          cursor: "pointer",
          p: 1.2,
          borderRadius: 1,
          backgroundColor: r ? "grey.100" : "grey.50",
          border: r ? "1px solid" : "none",
          borderColor: r ? "grey.100" : "transparent",
          textDecoration: "none",
          transition: "background-color 0.5s",
          "&:hover, &:active, &.did-connect__choose-item__active": {
            backgroundColor: "grey.100"
          },
          "& .other-item-icon": {
            opacity: "0",
            transform: "translateX(-100%)",
            transition: "transform 0.2s ease, opacity 0.1s ease"
          },
          "&:hover": {
            "& .other-item-icon": {
              display: "inline-block",
              transform: "translateX(0)",
              opacity: "1"
            }
          }
        },
        c?.sx
      ),
      children: [
        /* @__PURE__ */ e(_, { title: l, children: /* @__PURE__ */ e(
          t,
          {
            className: "arc-login-item__icon",
            sx: d(
              {
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                color: "text.primary"
              },
              g?.icon?.sx
            ),
            children: I(n) ? n : /* @__PURE__ */ e(
              t,
              {
                component: p,
                icon: n,
                sx: {
                  transform: `scale(${h})`,
                  width: f,
                  height: f
                }
              }
            )
          }
        ) }),
        x === "normal" ? /* @__PURE__ */ i(u, { children: [
          /* @__PURE__ */ i(t, { className: "arc-login-item__body", sx: { display: "flex", flexDirection: "column", flex: 1 }, children: [
            /* @__PURE__ */ e(
              a,
              {
                sx: {
                  fontSize: 14,
                  fontWeight: "500",
                  color: "text.primary",
                  whiteSpace: "nowrap"
                },
                children: l
              }
            ),
            s ? /* @__PURE__ */ e(
              a,
              {
                sx: {
                  color: "text.secondary",
                  fontSize: 12,
                  lineHeight: 1
                },
                children: s
              }
            ) : null
          ] }),
          r ? /* @__PURE__ */ e(
            a,
            {
              component: "span",
              className: "latest-badge",
              style: { color: m.palette.text.secondary, fontSize: 11 },
              children: y("lastUsed")
            }
          ) : /* @__PURE__ */ e(
            p,
            {
              className: "other-item-icon",
              icon: N,
              fontSize: "1.3rem",
              color: m.palette.primary.main
            }
          )
        ] }) : null
      ]
    }
  );
}
R.propTypes = {
  title: o.string.isRequired,
  description: o.string,
  icon: o.any.isRequired,
  iconScale: o.number,
  slotProps: o.object,
  mode: o.oneOf(["mini", "simple", "normal"]),
  isLatest: o.bool,
  t: o.func
};
export {
  R as default
};
