import { currency } from "@/lib/format";

export function StatCard({
  label,
  value,
  tone = "neutral"
}: {
  label: string;
  value: number;
  tone?: "neutral" | "positive" | "negative" | "warning";
}) {
  const toneClass =
    tone === "positive"
      ? "text-emerald-700"
      : tone === "negative"
        ? "text-red-700"
        : tone === "warning"
          ? "text-amber-700"
          : "text-ink";

  return (
    <div className="panel p-4">
      <p className="label">{label}</p>
      <p className={`mt-3 text-2xl font-semibold ${toneClass}`}>{currency(value)}</p>
    </div>
  );
}