import { r as i, j as r, c, bz as m, aO as g, H as p } from "./index-6wLGsgHc.js";
const x = /* @__PURE__ */ c("div", {
  target: "e1se5lgy3"
})(({
  theme: e,
  cache: s
}) => ({
  ...s ? {
    paddingBottom: e.spacing.lg,
    background: `linear-gradient(to bottom, ${e.colors.bgColor} 0%, ${e.colors.bgColor} 80%, transparent 100%)`
  } : null
}), ""), $ = /* @__PURE__ */ c("div", {
  target: "e1se5lgy2"
})({
  name: "1x17g94",
  styles: "display:flex;align-items:center;width:100%"
}), f = /* @__PURE__ */ c("div", {
  target: "e1se5lgy1"
})(({
  theme: e
}) => ({
  display: "flex",
  gap: e.spacing.sm,
  alignItems: "baseline"
}), ""), h = /* @__PURE__ */ c("div", {
  target: "e1se5lgy0"
})(({
  theme: e
}) => ({
  opacity: 0.6,
  fontSize: e.fontSizes.sm
}), ""), y = (e) => {
  const s = Math.floor(e / 3600), t = Math.floor(e % 3600 / 60), n = e % 60;
  if (s === 0 && t === 0) return `(${n.toFixed(1)} seconds)`;
  if (s === 0) {
    const d = `${t} minute${t === 1 ? "" : "s"}`, u = n === 0 ? "" : `, ${n.toFixed(1)} seconds`;
    return `(${d}${u})`;
  }
  const l = `${s} hour${s === 1 ? "" : "s"}`, a = t === 0 ? "" : `, ${t} minute${t === 1 ? "" : "s"}`, o = n === 0 ? "" : `, ${n.toFixed(1)} seconds`;
  return `(${l}${a}${o})`;
};
function S({
  element: e
}) {
  const {
    cache: s,
    showTime: t
  } = e, [n, l] = i.useState(0), a = i.useRef(null);
  return i.useEffect(() => {
    if (!t) return;
    a.current = Date.now();
    const o = () => {
      if (a.current !== null) {
        const u = (Date.now() - a.current) / 1e3;
        l(u);
      }
    };
    o();
    const d = setInterval(o, 100);
    return () => clearInterval(d);
  }, [t]), /* @__PURE__ */ r.jsx(x, {
    className: m({
      stSpinner: !0,
      stCacheSpinner: s
    }),
    "data-testid": "stSpinner",
    cache: s,
    children: /* @__PURE__ */ r.jsxs($, {
      children: [/* @__PURE__ */ r.jsx(g, {
        size: "base",
        margin: "0 md 0 0",
        padding: "0"
      }), /* @__PURE__ */ r.jsxs(f, {
        children: [/* @__PURE__ */ r.jsx(p, {
          source: e.text,
          allowHTML: !1
        }), t && /* @__PURE__ */ r.jsx(h, {
          children: y(n)
        })]
      })]
    })
  });
}
const j = i.memo(S);
export {
  j as default
};
//# sourceMappingURL=index-CvM3pTat-U6B8PZ3m.js.map
