import React,{
  Component
} from "react"

import axios from 'axios';
import ProductMain from './../ProductMain'
class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      articles: []
    }
  }

  componentDidmount() {
    axios.get('http://roocket.org/api/products')
      .then(response => {
        const {
          current_page,data
        } = response.data.data.data;
        this.setState({
          articles: data
        })
        console.log(response)
      })
      .catch(error => {
        console.log(error)
      })

  }

  render() {
    return (
      <div classname="jumbotron rtl">
        <div classname="container">
          <h1 classname="display-3"></h1>
          <p>While the idea of heating tobacco (instead of burning it) has been around for more than two decades,it took years of research and development to create a product that is satisfying to adult consumers. Around 8.8 million consumers have already chosen
            to switch from cigarettes to this product: our tobacco heating system IQOS. At the heart of IQOS are sophisticated electronics that heat specially designed heated tobacco units. IQOS heats the tobacco just enough to release a flavorful nicotine-containing
            tobacco vapor but without burning the tobacco. Here’s the key point: the tobacco in a cigarette burns at temperatures in excess of 600°C,generating smoke that contains high levels of harmful chemicals. But IQOS heats tobacco to much lower temperatures,up to 350°C,without combustion,fire,ash,or smoke. The lower temperature heating releases the true taste of heated tobacco. Because the tobacco is heated and not burned,the levels of harmful chemicals are significantly reduced compared to cigarette
            smoke. What is there? A nicotine-containing vapor – not smoke – that makes IQOS a smoke-free product that is appealing to smokers</p>
        </div>
        <div classname="row rtl">
          {this.state.articles.map((product,index)=>
          <ProductMain product={product}key={index}/>)}
        </div>
      </div>
    )
  }
}
export default Home