podcastdistributiona/components/admin/ui/stat-card.tsx

import { ArrowUpRight, ArrowDownRight } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { Sparkline } from "./charts";

export interface StatCardProps {
  label: string;
  value: string;
  /** Percent change vs the previous period. */
  delta?: number | null;
  /** When true, a negative delta is "good" (e.g. churn, error rate). */
  invertDelta?: boolean;
  spark?: number[];
  sparkColor?: string;
  icon?: React.ComponentType<{ className?: string }>;
  hint?: string;
}

export function StatCard({
  label,
  value,
  delta,
  invertDelta,
  spark,
  sparkColor,
  icon: Icon,
  hint,
}: StatCardProps) {
  const hasDelta = delta !== undefined && delta !== null && Number.isFinite(delta);
  const positive = hasDelta ? (invertDelta ? (delta as number) <= 0 : (delta as number) >= 0) : false;

  return (
    <Card>
      <CardContent className="space-y-3 p-5">
        <div className="flex items-center justify-between">
          <span className="text-sm font-medium text-muted-foreground">{label}</span>
          {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
        </div>
        <div className="flex items-end justify-between gap-3">
          <p className="font-display text-3xl font-extrabold tracking-tight">{value}</p>
          {hasDelta && (
            <span
              className={cn(
                "mb-1 inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-xs font-semibold",
                positive ? "bg-success/12 text-success" : "bg-destructive/12 text-destructive"
              )}
            >
              {(delta as number) >= 0 ? (
                <ArrowUpRight className="h-3 w-3" />
              ) : (
                <ArrowDownRight className="h-3 w-3" />
              )}
              {Math.abs(delta as number).toFixed(0)}%
            </span>
          )}
        </div>
        {spark && spark.length > 1 ? (
          <Sparkline data={spark} color={sparkColor} />
        ) : hint ? (
          <p className="text-xs text-muted-foreground">{hint}</p>
        ) : null}
      </CardContent>
    </Card>
  );
}