import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function StatTile({ label, value, hint, color = 'idle' }) {
    const ring = {
        ok: 'ring-emerald-500/40',
        warn: 'ring-amber-500/40',
        err: 'ring-red-500/40',
        idle: 'ring-slate-700',
    }[color];
    return (_jsxs("div", { className: [
            'rounded-lg border border-slate-800 bg-slate-900/60 p-4',
            'ring-1',
            ring,
        ].join(' '), children: [_jsx("div", { className: "text-xs uppercase tracking-wider text-slate-500", children: label }), _jsx("div", { className: "mt-1 text-2xl font-semibold text-slate-100 font-mono", children: value }), hint && _jsx("div", { className: "mt-1 text-xs text-slate-500", children: hint })] }));
}