"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from "react";
import { cn } from "@stigmer/theme";
import { formatDuration } from "../format-utils";
/**
 * Time axis for the waterfall timeline.
 *
 * Renders tick marks with duration labels at computed intervals.
 * Labels adapt density based on the scale's `labelEveryN` to
 * prevent overlapping text on dense scales.
 */
export const WaterfallScaleComponent = memo(function WaterfallScaleComponent({ scale, className, }) {
    if (scale.ticks.length === 0)
        return null;
    return (_jsx("div", { className: cn("relative h-5 shrink-0 select-none border-b border-[var(--stgm-border,#e5e5e5)]", className), "aria-hidden": "true", children: scale.ticks.map((tickMs, i) => {
            const pct = (tickMs / scale.totalMs) * 100;
            const showLabel = i % scale.labelEveryN === 0;
            return (_jsxs("div", { className: "absolute top-0 h-full", style: { left: `${pct}%` }, children: [_jsx("div", { className: "h-1.5 w-px bg-[var(--stgm-border,#e5e5e5)]" }), showLabel && (_jsx("span", { className: "absolute top-1.5 -translate-x-1/2 whitespace-nowrap text-[9px] tabular-nums text-[var(--stgm-muted-foreground,#737373)]", children: formatDuration(tickMs) }))] }, tickMs));
        }) }));
});
//# sourceMappingURL=WaterfallScale.js.map