import React, {Component} from "react";
import {Container, ListGroup} from "react-bootstrap";


export type EventProp = {
    id: number,
    name: string,
    tick: number
}

export class Events extends Component<{ events: Array<EventProp> }> {
    constructor(props) {
        super(props);
    }

    state = {
        events: this.props.events
    }

    mapEvents() {
        return this.state.events.map((event: EventProp) => {
            return (
                <ListGroup.Item action key={event.id}>
                    {event.name} @ Tick {event.tick}
                </ListGroup.Item>
            )
        })
    }

    render() {
        return (
            <Container>
                <div className={"border-bottom mb-2"}>
                    <h2>Events</h2>
                </div>
                <ListGroup>
                    {this.mapEvents()}
                </ListGroup>
            </Container>
        )
    }
}