import { Grid } from "@mui/joy";

import { StatCard } from "./stat-card";
import { DashboardSummary } from "./types";
import { formatNumber } from "./number-format";

export function TopStatsGrid({ summary }: { summary: DashboardSummary }) {
  return (
    <Grid container spacing={2}>
      <Grid xs={12} sm={6} lg={3}>
        <StatCard
          label="Active projects"
          value={formatNumber(summary.totalProjects)}
          caption="Projects receiving traffic"
        />
      </Grid>
      <Grid xs={12} sm={6} lg={3}>
        <StatCard
          label="Functions"
          value={formatNumber(summary.totalFunctions)}
          caption="Deployed across all projects"
        />
      </Grid>
      <Grid xs={12} sm={6} lg={3}>
        <StatCard
          label="Invocations"
          value={formatNumber(summary.totalInvocations)}
          caption="Across all projects"
        />
      </Grid>
      <Grid xs={12} sm={6} lg={3}>
        <StatCard
          label="Errors"
          value={formatNumber(summary.totalErrors)}
          caption="Functions reporting failures"
          statusColor={summary.totalErrors ? "danger" : "success"}
        />
      </Grid>
    </Grid>
  );
}
