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

export function KpiCard({
  label,
  value,
  detail,
  delta,
  tone = "gold"
}: {
  label: string;
  value: string | number;
  detail?: string;
  delta?: number;
  tone?: "gold" | "sage" | "rust";
}) {
  const positive = (delta ?? 0) >= 0;
  const DeltaIcon = positive ? ArrowUpRight : ArrowDownRight;

  return (
    <Card className="min-h-40">
      <div className="flex h-full flex-col justify-between gap-6">
        <p className="text-sm uppercase tracking-[0.18em] text-smoke">{label}</p>
        <div>
          <p
            className={cn(
              "font-serif text-5xl font-semibold leading-none font-tabular",
              tone === "gold" && "text-bordeaux-deep",
              tone === "sage" && "text-sage",
              tone === "rust" && "text-rust"
            )}
          >
            {value}
          </p>
          <div className="mt-3 flex items-center gap-2 text-sm text-smoke">
            {typeof delta === "number" ? (
              <span className={cn("inline-flex items-center gap-1 font-medium", positive ? "text-sage" : "text-rust")}>
                <DeltaIcon className="h-4 w-4" strokeWidth={1.5} />
                {positive ? "+" : ""}
                {delta} %
              </span>
            ) : null}
            {detail ? <span>{detail}</span> : null}
          </div>
        </div>
      </div>
    </Card>
  );
}