import type { ReactNode } from "react";

export function KpiCard({
  label,
  value,
  sub,
  tone = "neutral",
}: {
  label: string;
  value: string;
  sub?: ReactNode;
  tone?: "neutral" | "good" | "warn";
}) {
  const toneClass =
    tone === "good" ? "text-success" : tone === "warn" ? "text-danger" : "text-text-primary";
  return (
    <div className="rounded-lg border border-surface-2 bg-surface-0 px-4 py-3 transition-transform hover:-translate-y-0.5 hover:border-accent/30">
      <div className="text-xs font-medium uppercase tracking-wider text-text-muted">{label}</div>
      <div className={`mt-1 text-2xl font-semibold tabular-nums ${toneClass}`}>{value}</div>
      {sub ? <div className="mt-1 text-xs text-text-muted">{sub}</div> : null}
    </div>
  );
}