KPI card

import * as React from "react";
import { ArrowDownRight, ArrowUpRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface KpiCardProps {
  label: string;
  value: React.ReactNode;
  /** Percent or points change vs the comparison period. */
  delta?: number;
  deltaSuffix?: string;
  /** Lower is better (e.g. churn, latency): flips the color logic. */
  invert?: boolean;
  hint?: React.ReactNode;
  /** A small chart, e.g. <Sparkline />. */
  chart?: React.ReactNode;
  icon?: React.ReactNode;
  className?: string;
}

export function KpiCard({ label, value, delta, deltaSuffix = "%", invert, hint, chart, icon, className }: KpiCardProps) {
  const good = delta === undefined ? undefined : invert ? delta <= 0 : delta >= 0;
  return (
    <div className={cn("flex flex-col justify-between gap-3 rounded-lg border border-border bg-card p-4", className)}>
      <div className="flex items-center justify-between gap-2">
        <p className="text-sm text-muted-foreground">{label}</p>
        {icon && <span className="text-muted-foreground [&_svg]:size-4">{icon}</span>}
      </div>
      <div className="flex items-end justify-between gap-3">
        <div className="min-w-0">
          <p className="truncate text-2xl font-semibold tracking-tight tabular-nums">{value}</p>
          <div className="mt-1 flex items-center gap-1.5 text-xs">
            {delta !== undefined && (
              <span className={cn("inline-flex items-center gap-0.5 font-medium tabular-nums", good ? "text-emerald-600 dark:text-emerald-400" : "text-destructive")}>
                {delta >= 0 ? <ArrowUpRight className="size-3.5" /> : <ArrowDownRight className="size-3.5" />}
                {Math.abs(delta).toFixed(1)}
                {deltaSuffix}
              </span>
            )}
            {hint && <span className="text-muted-foreground">{hint}</span>}
          </div>
        </div>
        {chart && <div className="shrink-0">{chart}</div>}
      </div>
    </div>
  );
}