import CourtSvg from "../../assets/basketball_court.svg?react"
import "../../style/basket_court.css"
import { useRef } from "react"
import CourtPlayer from "./CourtPlayer"
import { Player } from "../../data/Player"

export interface BasketCourtProps {
    players: Player[]
    onPlayerRemove: (p: Player) => void
}

export function BasketCourt({ players, onPlayerRemove }: BasketCourtProps) {
    return (
        <div id="court-container" style={{ position: "relative" }}>
            <CourtSvg id="court-svg" />
            {players.map((player) => {
                return (
                    <CourtPlayer
                        key={player.id}
                        player={player}
                        onRemove={() => onPlayerRemove(player)}
                    />
                )
            })}
        </div>
    )
}