import React from 'react';
import { Table } from 'react-bootstrap';
import './css/tablecontent.css';

const MatchesTable = ({ data = null }) => {

    if (data != null && data.length != 0) {
        return (
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th className='center-column-text'>ChallangerID</th>
                        <th className='center-column-text'>Result</th>
                        <th className='center-column-text'>DefenderID</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        data.map((match) => {
                            return (
                                <tr key={match.id}>
                                    <td>{match.startDate}</td>
                                    <td className='center-column-text'>{match.challenger.name}</td>
                                    <td className='center-column-text'>{match.result.challengerGoals} : {match.result.defenderGoals}</td>
                                    <td className='center-column-text'>{match.defender.name}</td>
                                </tr>
                            );
                        })
                    }
                </tbody >
            </Table >
        );
    } else {
        return (
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Challanger</th>
                        <th>Result</th>
                        <th>Defender</th>
                    </tr>
                </thead>
            </Table >
        );
    }
}

export default MatchesTable;