import { cn } from "@/lib/utils";

export function KpiCard({
  title, value, sub, subColor = "text-emerald-600", icon, tint = "bg-blue-50 text-blue-600",
}: {
  title: string; value: React.ReactNode; sub?: string; subColor?: string;
  icon: React.ReactNode; tint?: string;
}) {
  return (
    <div className="card p-5">
      <div className="flex items-start gap-4">
        <div className={cn("h-12 w-12 rounded-xl grid place-items-center shrink-0", tint)}>
          {icon}
        </div>
        <div className="min-w-0">
          <div className="text-sm text-slate-500">{title}</div>
          <div className="text-2xl font-extrabold text-slate-900 mt-0.5">{value}</div>
          {sub && <div className={cn("text-xs font-medium mt-1", subColor)}>{sub}</div>}
        </div>
      </div>
    </div>
  );
}

export function KpiSkeleton() {
  return (
    <div className="card p-5">
      <div className="flex items-start gap-4">
        <div className="skeleton h-12 w-12 rounded-xl" />
        <div className="flex-1 space-y-2">
          <div className="skeleton h-3 w-20" />
          <div className="skeleton h-6 w-16" />
          <div className="skeleton h-3 w-24" />
        </div>
      </div>
    </div>
  );
}