import { cn } from "@/lib/utils";
import type { LucideIcon } from "lucide-react";

interface Props {
  label: string; value: string | number; icon?: LucideIcon;
  delta?: { value: number; direction: "up" | "down" | "flat" };
  className?: string;
}

export function KpiCard({ label, value, icon: Icon, delta, className }: Props) {
  const borderColor = delta?.direction === "up" ? "border-l-green-500" : delta?.direction === "down" ? "border-l-red-500" : "border-l-slate-200";
  return (
    <div className={cn("bg-white rounded-lg border border-slate-200/60 border-l-[3px] shadow-card px-5 py-4 hover:shadow-elevated transition-shadow", borderColor, className)}>
      <div className="flex items-center justify-between mb-2">
        <span className="text-[10px] font-bold uppercase tracking-widest text-slate-400">{label}</span>
        {Icon && <Icon className="w-4 h-4 text-slate-300" />}
      </div>
      <p className="text-2xl font-bold text-slate-900 tabular-nums leading-none">{typeof value === "number" ? value.toLocaleString() : value}</p>
      {delta && delta.direction !== "flat" && (
        <p className={cn("text-xs font-semibold mt-1.5", delta.direction === "up" ? "text-green-600" : "text-red-500")}>
          {delta.direction === "up" ? "↑" : "↓"} {Math.abs(delta.value)}% vs previous
        </p>
      )}
    </div>
  );
}
