export function Kpi({
  label,
  value,
  sub,
  tone,
}: {
  label: string;
  value: React.ReactNode;
  sub?: React.ReactNode;
  tone?: "up" | "down" | "warn" | "mute";
}) {
  const color =
    tone === "up"
      ? "text-up"
      : tone === "down"
      ? "text-down"
      : tone === "warn"
      ? "text-warn"
      : tone === "mute"
      ? "text-mute"
      : "text-ink";
  return (
    <div className="panel p-4 flex flex-col gap-1">
      <div className="kpi-label">{label}</div>
      <div className={`text-2xl font-semibold num ${color}`}>{value}</div>
      {sub !== undefined && <div className="text-xs text-mute num">{sub}</div>}
    </div>
  );
}