import React from "react";
import { Button, Card } from "react-bootstrap";
import propTypes from "prop-types";
import { grammaticalListString } from "../utils/strings";
export default class GameInfoCard extends React.Component {
    constructor(props) {
        super(props);
    }

    getParticipants() {
        let participants = [];
        this.props.match.registeredUsers.array.forEach(user => {
            participants.push(user.firstName);
        });
        return participants;
    }

    render() {
        return (
            <Card style={{ width: "20rem" }}>
                <Card.Body>
                    <Card.Title>{this.props.match.sport}</Card.Title>
                    <Card.Subtitle className="mb-2 text-muted">{this.props.match.sport}</Card.Subtitle>
                    <Card.Text>
                        Join <strong>{grammaticalListString(this.getParticipants(), 4)}</strong> to play a few matches of <strong>{this.props.match.sport}</strong> at <strong>{this.props.match.location}</strong> on <strong>{this.props.match.dateTime.toLocaleDateString("en-US")}</strong>!
                    </Card.Text>
                    <Button variant="primary">Join!</Button>
                </Card.Body>
            </Card>
        );
    }
}

GameInfoCard.propTypes = {
    match: propTypes.object,
};