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

export function StatCard({
  label,
  value,
  icon: Icon,
  trend,
  trendLabel,
  tone = "gold",
}: {
  label: string;
  value: string;
  icon: LucideIcon;
  trend?: number;
  trendLabel?: string;
  tone?: "gold" | "teal" | "zong" | "danger";
}) {
  const toneClasses: Record<string, string> = {
    gold: "bg-gold/12 text-gold-dim dark:text-gold-bright",
    teal: "bg-teal/12 text-teal-dim dark:text-teal",
    zong: "bg-zong/15 text-[#5C8A16] dark:text-[#9FE032]",
    danger: "bg-danger/12 text-danger",
  };

  const isPositive = (trend ?? 0) >= 0;

  return (
    <div className="panel flex flex-col gap-4 p-5">
      <div className="flex items-center justify-between">
        <span className={cn("flex h-10 w-10 items-center justify-center rounded-2xl", toneClasses[tone])}>
          <Icon size={18} strokeWidth={2} />
        </span>
        {trend !== undefined && (
          <span
            className={cn(
              "flex items-center gap-0.5 rounded-full px-2 py-1 text-[11px] font-semibold",
              isPositive ? "bg-success/12 text-success" : "bg-danger/12 text-danger"
            )}
          >
            {isPositive ? <ArrowUpRight size={12} /> : <ArrowDownRight size={12} />}
            {Math.abs(trend)}%
          </span>
        )}
      </div>
      <div>
        <p className="tnum font-display text-2xl font-semibold tracking-tight">{value}</p>
        <p className="mt-1 text-[13px] text-muted">{label}</p>
        {trendLabel && <p className="mt-0.5 text-[11px] text-muted/70">{trendLabel}</p>}
      </div>
    </div>
  );
}