Stat Card

import type { ReactNode } from "react";
import { ArrowDownRight, ArrowUpRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface StatCardProps {
  label: string;
  value: string;
  /** Change vs previous period, e.g. "+12%". Positive/negative inferred from the sign. */
  delta?: string;
  deltaLabel?: string;
  /** Values for the mini bar chart (any scale). */
  series?: number[];
  icon?: ReactNode;
  tone?: "surface" | "primary" | "accent" | "secondary";
  className?: string;
}

const TONES = {
  surface: "bg-da-surface text-da-surface-fg",
  primary: "bg-da-primary text-da-primary-fg",
  accent: "bg-da-accent text-da-accent-fg",
  secondary: "bg-da-secondary text-da-secondary-fg",
} as const;

export function StatCard({ label, value, delta, deltaLabel = "vs last month", series, icon, tone = "surface", className }: StatCardProps) {
  const negative = delta?.trim().startsWith("-") || delta?.trim().startsWith("−");
  const max = series && series.length ? Math.max(...series) : 1;

  return (
    <div className={cn("da-stroke flex flex-col gap-4 p-5 shadow-da-md", TONES[tone], className)}>
      <div className="flex items-center justify-between gap-3">
        <p className="font-da-mono text-[11px] font-bold tracking-da-label uppercase">{label}</p>
        {icon && (
          <span aria-hidden className="da-stroke grid size-8 place-items-center bg-da-bg text-da-fg [&_svg]:size-4">
            {icon}
          </span>
        )}
      </div>
      <p className="font-da-display text-5xl leading-none tracking-da-display">{value}</p>
      {delta && (
        <p className="flex items-center gap-2 text-sm font-bold">
          <span className={cn("da-stroke inline-flex items-center gap-0.5 px-1.5 py-0.5 font-da-mono text-xs", negative ? "bg-da-danger text-da-danger-fg" : "bg-da-success text-da-success-fg")}>
            {negative ? <ArrowDownRight aria-hidden className="size-3.5" strokeWidth={3} /> : <ArrowUpRight aria-hidden className="size-3.5" strokeWidth={3} />}
            {delta}
          </span>
          <span className="opacity-75">{deltaLabel}</span>
        </p>
      )}
      {series && series.length > 0 && (
        <div aria-hidden className="flex h-14 items-end gap-1">
          {series.map((v, i) => (
            <span key={i} className={cn("flex-1 border-[length:var(--da-border-width)] border-current", i === series.length - 1 ? "bg-current" : "bg-transparent")} style={{ height: `${Math.max(8, (v / max) * 100)}%` }} />
          ))}
        </div>
      )}
    </div>
  );
}

export default StatCard;