import { DashboardStatCard } from "@/components/dashboard/DashboardStatCard";
import { euroFormatter } from "@/lib/finance/money";

export function DashboardCards({
  summary,
  scope,
}: {
  summary: {
    income: number;
    realSpent: number;
    projectedSpent: number;
    projectedRemainingBalance: number;
  };
  scope: "anno" | "mese";
}) {
  const cards = [
    [`Entrate ${scope}`, summary.income],
    [`Spesa reale ${scope}`, summary.realSpent],
    [`Previsione ${scope}`, summary.projectedSpent],
    ["Saldo previsto", summary.projectedRemainingBalance],
  ];
  return (
    <div className="grid grid-cols-4 gap-2 md:grid-cols-2 md:gap-3 xl:grid-cols-4">
      {cards.map(([label, value]) => (
        <DashboardStatCard
          desktopClassName="md:col-span-1"
          key={label}
          label={String(label)}
          mobileSpan={2}
          value={euroFormatter.format(Number(value))}
        />
      ))}
    </div>
  );
}