knur-app/components/stat-card.tsx

import type { ReactNode } from "react";

type StatCardProps = {
  label: string;
  value: ReactNode;
  hint?: string;
  highlight?: boolean;
};

export function StatCard({ label, value, hint, highlight }: StatCardProps) {
  return (
    <div
      className={`group relative overflow-hidden rounded-2xl border bg-surface/55 shadow-lg shadow-black/10 backdrop-blur-md p-4 transition-all duration-200 hover:-translate-y-0.5 ${
        highlight
          ? "border-accent/30 shadow-accent/5"
          : "border-white/10 hover:border-white/20"
      }`}
    >
      {highlight && (
        <div className="pointer-events-none absolute -right-8 -top-10 h-24 w-24 rounded-full bg-accent/20 blur-2xl" />
      )}
      <div className="text-xs font-medium uppercase tracking-widest text-fg/50">
        {label}
      </div>
      <div
        className={`mt-1.5 font-display font-bold tabular-nums text-fg ${
          highlight ? "text-2xl" : "text-xl"
        }`}
      >
        {value}
      </div>
      {hint ? <div className="mt-1 text-xs text-fg/50">{hint}</div> : null}
    </div>
  );
}