import React from 'react';
import axios from 'axios';


export default class CpuList extends React.Component {
    state = {
        cpus: []
    }

    componentDidMount() {
    axios.get(`http://localhost/picker/public/api/cpus`)
        .then(res => {
            console.log(res.data.data);
            this.setState({ cpus:res.data.data })
        })
    }

    render() {
        return (
            // <ul>
            //     {this.state.cpus.map(cpu => <li>{cpu.name}</li>)}
            // </ul>
            <div>
                {this.state.cpus.map(cpu =>
                    <div className="surrounding">
                        <h3>
                            {cpu.name} - {cpu.id}
                        </h3>
                        <div>
                           <p>Core / Threads : {cpu.core_thread}</p>
                        </div>
                        <div>
                           <p>Base / Boost clocks :  {cpu.base_clock} GHz / {cpu.boost_clock} GHz</p>
                        </div>
                    </div>
                    )}
            </div>
        )
    }

}