import "../css/playerSelect.css";

export interface IPlayer {
  id: number;
  name: string;
  shirtNumber: number;
  picture: string;
  position: "GK" | "DEF" | "MID" | "ATK";
  goals: number;
  assist: number;
  matches: number;
  shots: IShot[];
}

export interface IShot {
  placement: [number, number];
  usedFoot: "LEFT" | "RIGHT" | "HEAD";
  scored: boolean;
}

export interface PlayerSelectProps {
  player: IPlayer;
  onChange: React.Dispatch<React.SetStateAction<number>>;
  selectedRadio: number;
}

export default function PlayerSelect({
  player,
  onChange,
  selectedRadio,
}: PlayerSelectProps) {
  return (
    <div className="spiller">
      <input
        type="radio"
        name="spiller"
        id={player.position + player.id}
        checked={selectedRadio === player.id}
        onChange={() => onChange(player.id)}
      />
      <div className="thumbnail">
        <img src={player.picture} alt={player.name} />
      </div>
    </div>
  );
}