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

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

export function BasketCourt({players, onPlayerRemove, onPlayerChange}: BasketCourtProps) {
    const divRef = useRef<HTMLDivElement>(null);

    return (
        <div id="court-container" ref={divRef} style={{position: "relative"}}>
            <CourtSvg id="court-svg"/>
            {players.map(player => {
                return <CourtPlayer key={player.team + player.role}
                                    player={player}
                                    onChange={onPlayerChange}
                                    onRemove={() => onPlayerRemove(player)}
                                    parentRef={divRef}
                />
            })}
        </div>
    )
}