"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { formatCost } from "../execution/UsageWidget";
const HARNESS_LABELS = {
    native: "Native",
    cursor: "Cursor",
};
const HARNESS_COLORS = {
    native: "bg-chart-1",
    cursor: "bg-chart-3",
};
/**
 * Displays the cost split between execution harnesses as a segmented bar.
 *
 * Renders a two-tone horizontal bar with labels showing cost and percentage
 * per harness. Designed for at-a-glance understanding of native vs cursor
 * cost distribution.
 */
export function HarnessSplitCard({ breakdown, className, }) {
    if (breakdown.length === 0)
        return null;
    const totalCost = breakdown.reduce((sum, h) => sum + Number(h.billableCostMicros), 0);
    if (totalCost <= 0)
        return null;
    return (_jsxs("div", { className: className, children: [_jsx("h3", { className: "mb-2 text-xs font-semibold text-foreground", children: "Harness Split" }), _jsxs("div", { className: "rounded-lg border border-border bg-card px-3.5 py-3", children: [_jsx("div", { className: "flex h-3 w-full overflow-hidden rounded-full", role: "img", "aria-label": "Cost distribution by harness", children: breakdown.map((entry) => {
                            const cost = Number(entry.billableCostMicros);
                            const pct = (cost / totalCost) * 100;
                            if (pct <= 0)
                                return null;
                            return (_jsx("div", { className: cn("transition-all", HARNESS_COLORS[entry.harness] ?? "bg-chart-4"), style: { width: `${pct}%` } }, entry.harness));
                        }) }), _jsx("div", { className: "mt-2.5 flex flex-wrap gap-x-5 gap-y-1", children: breakdown.map((entry) => {
                            const cost = Number(entry.billableCostMicros);
                            const pct = totalCost > 0 ? (cost / totalCost) * 100 : 0;
                            return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: cn("size-2 rounded-full", HARNESS_COLORS[entry.harness] ?? "bg-chart-4") }), _jsx("span", { className: "text-xs text-muted-foreground", children: HARNESS_LABELS[entry.harness] ?? entry.harness }), _jsx("span", { className: "text-xs tabular-nums font-medium text-foreground", children: formatCost(cost / 1_000_000) }), _jsxs("span", { className: "text-[0.6rem] tabular-nums text-muted-foreground", children: ["(", pct.toFixed(0), "%)"] })] }, entry.harness));
                        }) })] })] }));
}
//# sourceMappingURL=HarnessSplitCard.js.map