interface KpiCardProps {
  label: string;
  value: string | null;
  unit?: string;
  highlight?: boolean;
  onClick?: () => void;
}

export function KpiCard({ label, value, unit, highlight, onClick }: KpiCardProps) {
  return (
    <div
      onClick={onClick}
      className={`border rounded-lg p-4 flex flex-col gap-1 transition-all cursor-pointer hover:border-primary/50 hover:bg-primary/5 ${highlight ? "border-primary/40 bg-primary/5" : ""} ${onClick ? "cursor-pointer" : ""}`}
    >
      <span className="text-xs text-muted-foreground font-medium uppercase tracking-wide">
        {label}
      </span>
      <span className="text-2xl font-bold tabular-nums">
        {value ?? <span className="text-muted-foreground text-base">—</span>}
        {value && unit && (
          <span className="text-sm font-normal text-muted-foreground ml-1">
            {unit}
          </span>
        )}
      </span>
    </div>
  );
}