import type { BallboxStoreAdminPlayer, BallboxStoreClubListItem } from "@/lib/ballbox-store";

type PlayersAdminStatsProps = {
  players: BallboxStoreAdminPlayer[];
  clubs: BallboxStoreClubListItem[];
  cardClassName: string;
};

export function PlayersAdminStats({ players, clubs, cardClassName }: PlayersAdminStatsProps) {
  return (
    <section className="grid gap-4 md:grid-cols-4">
      <div className={cardClassName}>
        <p className="text-sm text-muted-foreground">Players</p>
        <p className="mt-2 text-4xl font-semibold">{players.length}</p>
      </div>
      <div className={cardClassName}>
        <p className="text-sm text-muted-foreground">Memberships</p>
        <p className="mt-2 text-4xl font-semibold">{players.reduce((total, player) => total + player.memberships.length, 0)}</p>
      </div>
      <div className={cardClassName}>
        <p className="text-sm text-muted-foreground">Clubs linked</p>
        <p className="mt-2 text-4xl font-semibold">
          {new Set(players.flatMap((player) => player.memberships.map((membership) => membership.clubId))).size}
        </p>
      </div>
      <div className={cardClassName}>
        <p className="text-sm text-muted-foreground">Network clubs</p>
        <p className="mt-2 text-4xl font-semibold">{clubs.length}</p>
      </div>
    </section>
  );
}