import { ReactNode } from "react";

export default function StatCard({
  title,
  value,
  icon,
  tone = "teal"
}: {
  title: string;
  value: string | number;
  icon: ReactNode;
  tone?: "teal" | "amber" | "rose" | "indigo";
}) {
  const tones = {
    teal: "bg-teal-50 text-jade",
    amber: "bg-amber-50 text-amber-700",
    rose: "bg-rose-50 text-rose-700",
    indigo: "bg-indigo-50 text-indigo-700"
  };

  return (
    <div className="rounded-md border border-line bg-white p-4">
      <div className="flex items-center justify-between gap-3">
        <div>
          <div className="text-sm text-slate-500">{title}</div>
          <div className="mt-2 text-2xl font-semibold text-ink">{value}</div>
        </div>
        <div className={`flex h-10 w-10 items-center justify-center rounded-md ${tones[tone]}`}>{icon}</div>
      </div>
    </div>
  );
}