import React from 'react'
import MatchDisp from './MatchDisp'

class MatchList extends React.Component {
  render () {
    const matches = this.props.match.matches
    const filtered = this.props.match.filtered

    return (
      <div>
        <h2>Matches ({filtered.length}/{matches.length})</h2>
        <table className='table table-bordered table-striped'>
          <thead>
            <tr>
              <th>Ort</th>
              <th>Datum</th>
              <th>Zeit</th>
              <th>Konkurrenz</th>
              <th>Spieler 1</th>
              <th>Spieler 2</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((match, key) =>
              <MatchDisp key={key} match={match} />
            )}
          </tbody>
        </table>
      </div>
    )
  }
}

export default MatchList