import { jsx, jsxs } from "react/jsx-runtime";
import HelpOutline from "@mui/icons-material/HelpOutline";
import { Stack, Tooltip, Typography } from "@mui/material";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { formatTrialText, whiteTooltipSx } from "../../utils/format.js";
export default function StakingBreakdown({
  staking,
  paymentAmount,
  trialActive,
  trialDays,
  afterTrialInterval
}) {
  const { t } = useLocaleContext();
  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, sx: { mb: 1 }, children: [
    /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [
        /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: 14 }, children: t("payment.checkout.paymentRequired") }),
        /* @__PURE__ */ jsx(
          Tooltip,
          {
            title: t("payment.checkout.stakingConfirm"),
            placement: "top",
            arrow: true,
            slotProps: { popper: { sx: whiteTooltipSx } },
            children: /* @__PURE__ */ jsx(HelpOutline, { sx: { fontSize: 16, color: "text.disabled" } })
          }
        )
      ] }),
      /* @__PURE__ */ jsx(Typography, { children: trialActive ? formatTrialText(t, trialDays, afterTrialInterval || "day") : paymentAmount })
    ] }),
    /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [
        /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: 14 }, children: t("payment.checkout.staking.title") }),
        /* @__PURE__ */ jsx(
          Tooltip,
          {
            title: t("payment.checkout.staking.tooltip"),
            placement: "top",
            arrow: true,
            slotProps: { popper: { sx: whiteTooltipSx } },
            children: /* @__PURE__ */ jsx(HelpOutline, { sx: { fontSize: 16, color: "text.disabled" } })
          }
        )
      ] }),
      /* @__PURE__ */ jsx(Typography, { children: staking })
    ] })
  ] });
}
