import { ReactNode } from "react";

export default function KpiCard({
  label,
  value,
  icon,
  tone = "emerald",
}: {
  label: string;
  value: ReactNode;
  icon: ReactNode;
  tone?: "emerald" | "teal" | "amber" | "sand";
}) {
  const tones = {
    emerald: "bg-emerald-light text-emerald",
    teal: "bg-teal-light text-teal",
    amber: "bg-amber-50 text-warning",
    sand: "bg-sand text-emerald",
  };
  return (
    <div className="rounded-card border border-sand-dark/60 bg-white p-5 shadow-card">
      <div className="flex items-start justify-between">
        <div>
          <p className="text-sm font-medium text-muted">{label}</p>
          <p className="mt-2 text-3xl font-extrabold tracking-tight text-ink">{value}</p>
        </div>
        <div className={`flex h-11 w-11 items-center justify-center rounded-card ${tones[tone]}`}>
          {icon}
        </div>
      </div>
    </div>
  );
}