"use client";
import { jsx, jsxs } from "react/jsx-runtime";
function getTimingClasses(ms) {
  if (ms >= 500) return { text: "text-red-500", bar: "bg-red-500" };
  if (ms >= 100) return { text: "text-amber-500", bar: "bg-amber-500" };
  return { text: "text-emerald-500", bar: "bg-emerald-500" };
}
function getTimingBarWidth(ms, maxMs) {
  if (maxMs === 0) return "0%";
  return `${Math.min(100, ms / maxMs * 100)}%`;
}
function EnricherTiming({ entries }) {
  if (entries.length === 0) {
    return /* @__PURE__ */ jsx("p", { className: "text-xs italic text-muted-foreground", children: "No timing data" });
  }
  const recent = entries.slice(-20).reverse();
  const maxMs = Math.max(...recent.map((e) => e.durationMs), 1);
  return /* @__PURE__ */ jsx("div", { children: recent.map((entry, idx) => {
    const classes = getTimingClasses(entry.durationMs);
    return /* @__PURE__ */ jsxs("div", { className: "border-b border-border/50 py-1 text-xs", children: [
      /* @__PURE__ */ jsxs("div", { className: "mb-0.5 flex justify-between", children: [
        /* @__PURE__ */ jsx("span", { className: "font-medium", children: entry.enricherId }),
        /* @__PURE__ */ jsxs("span", { className: `font-mono font-semibold ${classes.text}`, children: [
          entry.durationMs,
          "ms"
        ] })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "h-1 overflow-hidden rounded bg-muted", children: /* @__PURE__ */ jsx(
        "div",
        {
          className: `h-full rounded transition-[width] duration-300 ${classes.bar}`,
          style: { width: getTimingBarWidth(entry.durationMs, maxMs) }
        }
      ) }),
      /* @__PURE__ */ jsxs("div", { className: "mt-px text-[11px] text-muted-foreground", children: [
        entry.targetEntity,
        " | ",
        entry.moduleId
      ] })
    ] }, idx);
  }) });
}
export {
  EnricherTiming
};
//# sourceMappingURL=EnricherTiming.js.map
