"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
const PHASE_LABELS = {
    ready: "Ready",
    running: "Running",
    pending: "Pending",
    degraded: "Degraded",
    failed: "Failed",
    disabled: "Disabled",
    draft: "Draft",
};
/**
 * Accessible status indicator that combines a color dot with a text label.
 *
 * Never communicates status through color alone — the text label is always
 * present (WCAG 1.4.1). Colors come from `--stgm-status-*` design tokens
 * defined in `@stigmer/theme`, ensuring correct appearance in both light
 * and dark modes.
 *
 * @example
 * ```tsx
 * <StatusBadge phase="ready" />
 * <StatusBadge phase="failed" label="Unreachable" tooltip="Last checked 2m ago" />
 * ```
 */
export function StatusBadge({ phase, label, tooltip, className, }) {
    const displayLabel = label ?? PHASE_LABELS[phase];
    const badge = (_jsxs("span", { className: cn("inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium leading-none", statusClasses(phase), className), children: [_jsx("span", { className: cn("size-1.5 shrink-0 rounded-full", dotClasses(phase)), "aria-hidden": "true" }), displayLabel] }));
    if (!tooltip)
        return badge;
    return (_jsx("span", { title: tooltip, className: "inline-flex", children: badge }));
}
/**
 * Maps a status phase to Tailwind classes using `--stgm-status-*` tokens.
 * Background uses the `-subtle` variant; text uses the main status color.
 */
function statusClasses(phase) {
    switch (phase) {
        case "ready":
            return "bg-[var(--stgm-status-ready-subtle)] text-[var(--stgm-status-ready)]";
        case "running":
            return "bg-[var(--stgm-status-running-subtle)] text-[var(--stgm-status-running)]";
        case "pending":
            return "bg-[var(--stgm-status-pending-subtle)] text-[var(--stgm-status-pending)]";
        case "degraded":
            return "bg-[var(--stgm-status-degraded-subtle)] text-[var(--stgm-status-degraded)]";
        case "failed":
            return "bg-[var(--stgm-status-failed-subtle)] text-[var(--stgm-status-failed)]";
        case "disabled":
            return "bg-[var(--stgm-status-disabled-subtle)] text-[var(--stgm-status-disabled)]";
        case "draft":
            return "bg-[var(--stgm-status-draft-subtle)] text-[var(--stgm-status-draft)]";
    }
}
/** Maps a status phase to the dot's background color (the main token). */
function dotClasses(phase) {
    switch (phase) {
        case "ready":
            return "bg-[var(--stgm-status-ready)]";
        case "running":
            return "bg-[var(--stgm-status-running)]";
        case "pending":
            return "bg-[var(--stgm-status-pending)]";
        case "degraded":
            return "bg-[var(--stgm-status-degraded)]";
        case "failed":
            return "bg-[var(--stgm-status-failed)]";
        case "disabled":
            return "bg-[var(--stgm-status-disabled)]";
        case "draft":
            return "bg-[var(--stgm-status-draft)]";
    }
}
//# sourceMappingURL=StatusBadge.js.map