import type { ReactNode } from "react";
import { Card } from "./card";
import { Sparkline } from "./sparkline";

type Tone = "accent" | "success" | "warning" | "neutral";

const TONE_COLOR: Record<Tone, string> = {
  accent: "text-accent",
  success: "text-success",
  warning: "text-warning",
  neutral: "text-muted-foreground",
};

type Props = {
  label: string;
  value: ReactNode;
  hint?: string;
  delta?: { value: string; positive?: boolean };
  spark?: number[];
  tone?: Tone;
  icon?: ReactNode;
  pending?: boolean;
};

export function KpiCard({
  label,
  value,
  hint,
  delta,
  spark,
  tone = "accent",
  icon,
  pending = false,
}: Props) {
  return (
    <Card className="overflow-hidden mf-fade-in">
      <div className="px-5 py-4">
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
              {icon}
              <span>{label}</span>
            </div>
            <div className="mt-2 flex items-baseline gap-2">
              <span
                className={[
                  "text-2xl font-semibold tracking-tight",
                  pending ? "text-subtle-foreground" : "text-foreground",
                ].join(" ")}
              >
                {value}
              </span>
              {delta && (
                <span
                  className={[
                    "text-xs font-medium",
                    delta.positive ? "text-success" : "text-danger",
                  ].join(" ")}
                >
                  {delta.positive ? "↑" : "↓"} {delta.value}
                </span>
              )}
            </div>
          </div>
          {spark && spark.length > 0 && (
            <div className={`shrink-0 ${TONE_COLOR[tone]}`}>
              <Sparkline data={spark} width={96} height={32} />
            </div>
          )}
        </div>
        {hint && (
          <p className="mt-3 text-[11px] text-subtle-foreground line-clamp-2">
            {hint}
          </p>
        )}
      </div>
    </Card>
  );
}