import React, {useState, useEffect} from 'react';
import axios from "axios";
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';

const Products = () => {

const [data, setData] = useState([]);

useEffect( () => {

    async function fetchData() {
        try{
            const response = await axios('http://localhost/JSON-PHP-API/');

             setData(...data, response.data);

        } catch (err){

            console.log(err);

        }
    }

    fetchData();
    console.log(data);

}, [data]);



return(
    <div className='container'>
        {Object.entries(data).map(([key, product], i) => (
            <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" src={require(`/public/pics/${product.picUrl}`)} />
            <Card.Body>
            <Card.Title> {product.name} </Card.Title>
            <Card.Text> {product.beschreibung} </Card.Text>
            <Button variant="primary">In den Warenkorb</Button>
            </Card.Body>
            </Card>
        ))}
    </div>

)
}

export default Products;