Stat Card

import { cn } from "@/lib/utils";

export interface StatCardProps {
  label?: string;
  value?: string;
  change?: string;
  /** Bar heights (0–100). */
  bars?: number[];
  className?: string;
}

/** Analytics stat: mono label, large display value, change in mono, and a row of thin vertical bars (last bar in ink, others gray) — no chart chrome. */
export function StatCard({
  label = "Visitors · 30 days",
  value = "18,402",
  change = "+12.4% vs previous",
  bars = [32, 40, 36, 52, 48, 60, 44, 58, 70, 66, 74, 90],
  className,
}: StatCardProps) {
  return (
    <article className={cn("w-full max-w-sm border-t border-da-border-strong pt-4", className)}>
      <h3 className="font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase">{label}</h3>
      <p className="mt-3 font-da-display text-5xl font-medium tracking-da-display tabular-nums">{value}</p>
      <p className="mt-1 font-da-mono text-xs">{change}</p>
      <div aria-hidden className="mt-6 flex h-16 items-end gap-1">
        {bars.map((b, i) => (
          <span key={i} className={cn("flex-1", i === bars.length - 1 ? "bg-da-fg" : "bg-da-muted")} style={{ height: `${b}%` }} />
        ))}
      </div>
    </article>
  );
}

export default StatCard;