import type { BallboxStoreClubDetail } from "@/lib/ballbox-store";

type NetworkAdminStatsProps = {
  clubs: BallboxStoreClubDetail[];
  cardClassName: string;
};

export function NetworkAdminStats({ clubs, cardClassName }: NetworkAdminStatsProps) {
  return (
    <section className="grid gap-4 md:grid-cols-4">
      <div className={cardClassName}>
        <p className="text-sm text-muted-foreground">Clubs</p>
        <p className="mt-2 text-4xl font-semibold">{clubs.length}</p>
      </div>
      <div className={cardClassName}>
        <p className="text-sm text-muted-foreground">Venues</p>
        <p className="mt-2 text-4xl font-semibold">{clubs.reduce((total, club) => total + club.venues.length, 0)}</p>
      </div>
      <div className={cardClassName}>
        <p className="text-sm text-muted-foreground">Vending machines</p>
        <p className="mt-2 text-4xl font-semibold">
          {clubs.reduce((total, club) => total + club.venues.reduce((venueTotal, venue) => venueTotal + venue.machines, 0), 0)}
        </p>
      </div>
      <div className={cardClassName}>
        <p className="text-sm text-muted-foreground">Screens</p>
        <p className="mt-2 text-4xl font-semibold">
          {clubs.reduce((total, club) => total + club.venues.reduce((venueTotal, venue) => venueTotal + venue.screens, 0), 0)}
        </p>
      </div>
    </section>
  );
}