import type { Dispatch, SetStateAction } from "react";
import { NetworkAdminClubCard } from "@/components/network-admin-club-card";
import {
  type Club,
  type MachineFormState,
  type VenueFormState,
  type VenueStatus,
  resolveVenueForm,
} from "@/components/network-admin-client-config";

type NetworkAdminClubListProps = {
  clubs: Club[];
  busy: boolean;
  setClubs: Dispatch<SetStateAction<Club[]>>;
  venueForms: Record<string, VenueFormState>;
  setVenueForms: Dispatch<SetStateAction<Record<string, VenueFormState>>>;
  emptyVenueForm: VenueFormState;
  machineForms: Record<string, MachineFormState>;
  setMachineForms: Dispatch<SetStateAction<Record<string, MachineFormState>>>;
  emptyMachineForm: MachineFormState;
  venueStatusOptions: VenueStatus[];
  selectClassName: string;
  articleCardClassName: string;
  mutedPanelClassName: string;
  insetPanelClassName: string;
  wellClassName: string;
  runMutation: (task: () => Promise<void>, successMessage: string) => Promise<void>;
};

export function NetworkAdminClubList({
  clubs,
  busy,
  setClubs,
  venueForms,
  setVenueForms,
  emptyVenueForm,
  machineForms,
  setMachineForms,
  emptyMachineForm,
  venueStatusOptions,
  selectClassName,
  articleCardClassName,
  mutedPanelClassName,
  insetPanelClassName,
  wellClassName,
  runMutation,
}: NetworkAdminClubListProps) {
  return (
    <section className="space-y-4">
      {clubs.map((club) => (
        <NetworkAdminClubCard
          key={club.id}
          club={club}
          busy={busy}
          setClubs={setClubs}
          venueForm={resolveVenueForm(venueForms, club.id, emptyVenueForm)}
          setVenueForms={setVenueForms}
          emptyVenueForm={emptyVenueForm}
          machineForms={machineForms}
          setMachineForms={setMachineForms}
          emptyMachineForm={emptyMachineForm}
          venueStatusOptions={venueStatusOptions}
          selectClassName={selectClassName}
          articleCardClassName={articleCardClassName}
          mutedPanelClassName={mutedPanelClassName}
          insetPanelClassName={insetPanelClassName}
          wellClassName={wellClassName}
          runMutation={runMutation}
        />
      ))}
    </section>
  );
}