1  /**
 2   * Metric card — shows a single KPI with optional delta/subtitle.
 3   * variant: 'default' | 'success' | 'warning' | 'error'
 4   */
 5  export default function MetricCard({ label, value, sub, variant = 'default' }) {
 6    const accent = {
 7      default: 'text-sky-400',
 8      success: 'text-emerald-400',
 9      warning: 'text-amber-400',
10      error: 'text-red-400',
11    }[variant];
12  
13    return (
14      <div className="rounded-lg border border-slate-700 bg-slate-800 p-4">
15        <p className="text-xs font-medium uppercase tracking-wider text-slate-500">{label}</p>
16        <p className={`mt-1 text-2xl font-bold ${accent}`}>{value ?? '—'}</p>
17        {sub && <p className="mt-0.5 text-xs text-slate-500">{sub}</p>}
18      </div>
19    );
20  }