import { clsx } from "clsx";

export function StatsCard({
  label,
  value,
  delta,
  className,
}: {
  label: string;
  value: string | number;
  delta?: string;
  className?: string;
}) {
  return (
    <div
      className={clsx(
        "p-4 rounded-xl bg-surface border border-border-light",
        className
      )}
    >
      <p className="text-2xl font-bold text-text-primary">{value}</p>
      <p className="text-xs text-text-muted mt-1">{label}</p>
      {delta && (
        <p className="text-xs text-success mt-1">{delta}</p>
      )}
    </div>
  );
}