"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { cn } from "@open-mercato/shared/lib/utils";
function resolveStageColor(stage, stageDictionary) {
  if (!stage) return null;
  const entry = stageDictionary[stage];
  return entry?.color ?? null;
}
function resolveStageLabel(stage, stageDictionary, unassignedLabel) {
  if (!stage) return unassignedLabel;
  return stageDictionary[stage]?.label ?? unassignedLabel;
}
function PipelineStageBar({ stages, stageDictionary, unassignedLabel }) {
  const segments = React.useMemo(
    () => stages.filter((entry) => entry.count > 0),
    [stages]
  );
  if (segments.length === 0) return null;
  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
    /* @__PURE__ */ jsx("div", { className: "flex h-2 w-full gap-1 overflow-hidden rounded-full", children: segments.map((entry, index) => {
      const color = resolveStageColor(entry.stage, stageDictionary);
      return /* @__PURE__ */ jsx(
        "span",
        {
          className: cn("h-full rounded-full", color ? null : "bg-muted"),
          style: { flexGrow: entry.count, ...color ? { backgroundColor: color } : {} },
          "aria-hidden": true
        },
        entry.stage ?? `unassigned-${index}`
      );
    }) }),
    /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-x-3 gap-y-1", children: segments.map((entry, index) => {
      const color = resolveStageColor(entry.stage, stageDictionary);
      const label = resolveStageLabel(entry.stage, stageDictionary, unassignedLabel);
      return /* @__PURE__ */ jsxs(
        "li",
        {
          className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground",
          children: [
            /* @__PURE__ */ jsx(
              "span",
              {
                className: cn("inline-block h-2 w-2 rounded-full border border-border", color ? null : "bg-muted"),
                style: color ? { backgroundColor: color } : void 0,
                "aria-hidden": true
              }
            ),
            /* @__PURE__ */ jsx("span", { children: label }),
            /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: entry.count })
          ]
        },
        entry.stage ?? `unassigned-legend-${index}`
      );
    }) })
  ] });
}
var PipelineStageBar_default = PipelineStageBar;
export {
  PipelineStageBar,
  PipelineStageBar_default as default
};
//# sourceMappingURL=PipelineStageBar.js.map
