// §2 cost overview as KPI cards: total, nodes, vmstorage storage, savings.

import type { CostOverview } from "@/engine/report-model";
import { money, num } from "@/lib/fmt";
import { KpiCard } from "@/components/ui/KpiCard";

export function CostOverviewCards({
  cost,
  savings,
}: {
  cost: CostOverview;
  savings: number | null;
}) {
  return (
    <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
      <KpiCard
        label="Total monthly cost"
        value={money(cost.total)}
        sub={`${num(cost.nodeCount)} nodes + ${num(cost.pvcCount)} vmstorage PVCs`}
      />
      <KpiCard label="Node cost" value={money(cost.nodeCost)} sub={`${num(cost.nodegroupCount)} nodegroups`} />
      <KpiCard
        label="vmstorage storage"
        value={money(cost.pvcCost)}
        sub={`${num(cost.pvcCount)} PVCs · ${num(cost.pvcTotalGib)} GiB`}
      />
      <KpiCard
        label="Potential monthly savings"
        value={money(savings)}
        sub={savings !== null && cost.total > 0 ? `${((savings / cost.total) * 100).toFixed(1)}% of cost` : undefined}
        tone="good"
      />
    </div>
  );
}