import type { Dispatch, SetStateAction } from "react";
import { PlayersAdminPlayerCard } from "@/components/players-admin-player-card";
import type { BallboxStoreAdminPlayer, BallboxStoreClubListItem } from "@/lib/ballbox-store";

type PlayersAdminPlayerListProps = {
  players: BallboxStoreAdminPlayer[];
  setPlayers: Dispatch<SetStateAction<BallboxStoreAdminPlayer[]>>;
  busy: boolean;
  clubs: BallboxStoreClubListItem[];
  membershipClubIds: Record<string, string>;
  setMembershipClubIds: Dispatch<SetStateAction<Record<string, string>>>;
  articleCardClassName: string;
  insetPanelClassName: string;
  wellClassName: string;
  selectClassName: string;
  runMutation: (task: () => Promise<void>, successMessage: string) => Promise<void>;
};

export function PlayersAdminPlayerList({
  players,
  setPlayers,
  busy,
  clubs,
  membershipClubIds,
  setMembershipClubIds,
  articleCardClassName,
  insetPanelClassName,
  wellClassName,
  selectClassName,
  runMutation,
}: PlayersAdminPlayerListProps) {
  return (
    <section className="space-y-4">
      {players.length === 0 ? (
        <div className={`${articleCardClassName} text-sm text-muted-foreground`}>No players yet.</div>
      ) : (
        players.map((player) => (
          <PlayersAdminPlayerCard
            key={player.id}
            player={player}
            setPlayers={setPlayers}
            busy={busy}
            clubs={clubs}
            membershipClubIds={membershipClubIds}
            setMembershipClubIds={setMembershipClubIds}
            articleCardClassName={articleCardClassName}
            insetPanelClassName={insetPanelClassName}
            wellClassName={wellClassName}
            selectClassName={selectClassName}
            runMutation={runMutation}
          />
        ))
      )}
    </section>
  );
}