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

interface KpiCardProps {
  label: string;
  value: string | number;
  sub?: string;
  icon?: LucideIcon;
  accent?: "default" | "blue" | "green" | "red";
}

const ACCENT: Record<string, string> = {
  default: "text-BLACK",
  blue: "text-VITROWN_BLUE",
  green: "text-GREEN",
  red: "text-RED",
};

export function KpiCard({
  label,
  value,
  sub,
  icon: Icon,
  accent = "default",
}: KpiCardProps) {
  return (
    <div className="rounded-2xl border border-WHITE3 bg-WHITE p-4">
      <div className="flex items-center justify-between">
        <span className="text-GRAY text-[13px]">{label}</span>
        {Icon && <Icon size={18} className="text-GRAY shrink-0" />}
      </div>
      <p
        className={cn(
          "mt-2 text-[24px] font-extrabold tabular-nums leading-tight",
          ACCENT[accent]
        )}
      >
        {value}
      </p>
      {sub && <p className="text-[12px] text-GRAY mt-1">{sub}</p>}
    </div>
  );
}

export default KpiCard;