import type { StatItem } from "@/types";

export function StatCard({ label, value, caption }: StatItem) {
  return (
    <div className="border-l-2 border-primary/40 pl-5">
      <p className="font-display text-display-md text-ink [font-variant-numeric:tabular-nums]">{value}</p>
      <p className="mt-1 text-body-sm font-medium text-ink-soft">{label}</p>
      {caption && <p className="mt-0.5 text-caption text-slate">{caption}</p>}
    </div>
  );
}

export function StatGrid({ stats }: { stats: StatItem[] }) {
  return (
    <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
      {stats.map((s) => (
        <StatCard key={s.label} {...s} />
      ))}
    </div>
  );
}