export class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      models: [],
      isLoaded: false
    };
  }

  componentDidMount() {
    fetch(myUrlAPI)
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          models: json
        });
      });
  }

  render() {
    const { isLoaded, models } = this.state;

    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
          <ul>{models.map(model => <li>{model.name}</li>)};</ul>

          <a href="/sofa">
            <div className="Parcelas">
              <img
                src="../../img/image-card-1@2x.png"
                className="ParcImage"
                alt="sofa"
              />
              <h1>Sofa hipnos</h1>
              <h2>
                1,200<span>€</span>
              </h2>
              <p className="Features">
                w 20.5 x 15.5 x h 19.5 (cm)<br />Pele
              </p>

              <button className="Botao">
                <p className="MostraDepois">See Details</p>
                <span>+</span>
              </button>
              <img
                src="../../img/points.svg"
                className="Decoration"
                alt="points"
              />
            </div>
          </a>
        </div>
      );
    }
  }
}