export function StatCard({
  label,
  value,
  change,
}: {
  change?: string;
  label: string;
  value: string;
}) {
  return (
    <div className="rounded-[var(--uhuru-radius-lg)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] px-5 py-5 shadow-[var(--uhuru-shadow-sm)]">
      <p className="m-0 text-xs uppercase tracking-[0.16em] text-[var(--uhuru-text-tertiary)]">{label}</p>
      <p className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-[var(--uhuru-text-primary)]">{value}</p>
      {change ? <p className="mt-2 mb-0 text-sm text-[var(--uhuru-text-secondary)]">{change}</p> : null}
    </div>
  );
}