import React, { Component } from 'react';
import '../Assets/css/grayscale.css';

class Details extends Component {
    constructor(){
        super();
        this.state = {
            equipes:[]
        };
    }

    componentDidMount(){
        fetch('http://api.football-data.org/v1/competitions/'+this.props.match.params.id+'/teams')
            .then(res => res.json())
            .then(res => {
                this.setState({
                 equipes: res
                });
            })
            .catch(error => {
                console.log('error dude, desolé');
            })
    }

    render () {
        console.log(this.state.equipes);
        return (
        <div>
            <header className="ligues">
              <div className="intro-body">
                <div className="container">
                  <div className="row">
                    <div className="col-lg-8 mx-auto">
                      <h1 className="brand-heading">Ligues Football</h1>
                      <a href="" className="btn btn-circle js-scroll-trigger">
                        <i className="fa fa-angle-double-down animated"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </header>
            <h1>Teams Page</h1>
            <div className="row">
            {
                this.state.equipes.map(function(p, index){
                    return(
                        <div className="col-md-3">
                            <div className="">
                              <img className="card-img-top" src="https://cdn0.iconfinder.com/data/icons/cup/154/football-shield-club-sport-512.png" alt="Card image cap"/>
                              <div className="card-body">
                                <h5 className="card-title black"> {p.caption} </h5>
                              </div>
                            </div>
                        </div>
                    );
                })
            }
            </div>
        </div>
        );
    }
}

export default Details;