import React from 'react';

function ListGameCell(props){
    const isSelected = props.selectedGame === props.data.gameId;

    return (
      <div
        className={`w-full p-2 my-1 border-2 rounded-sm border-black ${
          isSelected ? 'bg-blue-400' : 'bg-slate-200 hover:bg-slate-400'
        }`}
        onClick={() => isSelected ? props.setGame(null) :props.setGame(props.data.gameId)}
      >
        <p>Game ID: {props.data.gameId}</p>
        <p>
          {props.data.completed}/{props.data.gameSize}
        </p>
      </div>
    );
}

export default ListGameCell;