Stat Card

import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface StatCardProps {
  label?: string;
  value?: string;
  change?: string;
  positive?: boolean;
  icon?: ReactNode;
  tone?: "peach" | "mint" | "lavender" | "butter" | "white";
  /** Mini bar series (0–100). */
  bars?: number[];
  className?: string;
}

const TONES = {
  peach: "bg-da-accent text-da-accent-fg",
  mint: "bg-da-secondary text-da-secondary-fg",
  lavender: "bg-da-primary/12 text-da-fg",
  butter: "bg-da-warning/25 text-da-fg",
  white: "bg-da-surface text-da-surface-fg shadow-da-sm",
} as const;

/** Friendly KPI tile: emoji/icon, label, big rounded number, change pill and a row of rounded mini bars; five tones. */
export function StatCard({
  label = "Tasks done this week",
  value = "48",
  change = "+12",
  positive = true,
  icon = "✅",
  tone = "mint",
  bars = [30, 45, 40, 70, 55, 80, 65],
  className,
}: StatCardProps) {
  const max = Math.max(...bars, 1);
  return (
    <div className={cn("rounded-da-lg p-6", TONES[tone], className)}>
      <div className="flex items-center justify-between">
        <span aria-hidden className="grid size-10 place-items-center rounded-full bg-da-surface/80 text-lg">
          {icon}
        </span>
        <span
          className={cn("rounded-da-pill px-2.5 py-1 text-xs font-bold", positive ? "bg-da-surface/80 text-da-success" : "bg-da-surface/80 text-da-danger")}
        >
          {change}
          <span className="sr-only"> vs last week</span>
        </span>
      </div>
      <p className="mt-5 text-sm font-medium opacity-85">{label}</p>
      <p className="font-da-display text-5xl font-extrabold tracking-da-display">{value}</p>
      <div aria-hidden className="mt-5 flex h-12 items-end gap-1.5">
        {bars.map((b, i) => (
          <span
            key={i}
            className={cn("flex-1 rounded-da-sm", i === bars.length - 1 ? "bg-current opacity-70" : "bg-da-surface/70")}
            style={{ height: `${(b / max) * 100}%` }}
          />
        ))}
      </div>
    </div>
  );
}

export default StatCard;