import { jsx, jsxs } from "react/jsx-runtime";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { OpenInNewOutlined } from "@mui/icons-material";
import { Link, Stack, Typography } from "@mui/material";
import { styled } from "@mui/system";
import { getTxLink } from "../../libs/util.js";
export default function TxLink({
  details,
  method,
  mode = "dashboard",
  align = "left",
  size = 20
}) {
  const { t } = useLocaleContext();
  if (!details || mode === "customer" && method.type === "stripe") {
    return /* @__PURE__ */ jsx(
      Typography,
      {
        component: "small",
        sx: {
          color: "text.secondary"
        },
        children: t("common.none")
      }
    );
  }
  const { text, link } = getTxLink(method, details);
  if (link && text) {
    return /* @__PURE__ */ jsx(Link, { href: link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(
      Root,
      {
        direction: "row",
        alignItems: "center",
        justifyContent: align === "left" ? "flex-start" : "flex-end",
        sx: { color: "text.link" },
        spacing: 1,
        children: [
          /* @__PURE__ */ jsx(Typography, { className: "tx-link-text", component: "span", sx: { color: "text.link" }, children: text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join("...") : text }),
          /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small", sx: { width: size, height: size } })
        ]
      }
    ) });
  }
  return /* @__PURE__ */ jsx(
    Typography,
    {
      component: "small",
      sx: {
        color: "text.secondary"
      },
      children: t("common.none")
    }
  );
}
const Root = styled(Stack)`
  @media (max-width: 600px) {
    svg.MuiSvgIcon-root {
      display: none !important;
    }
  }
`;
