import React, {useState, useEffect} from 'react';

const Plants = () => {


    // TODO Figure out layout and what information to pull form json
    // Maby add pictures etc.


    const [plant, setPlant] = useState([]);

    useEffect(() => {
        jsonFetch();
    }, [])

    const jsonFetch = () => {
        fetch('../plantinfo.json')
        .then((res) => res.json())
        .then(data => setPlant(data))
        .catch(err => console.error(err))
    }

    console.log(plant.imagefile)

    return (
        <div>
            
            <div className="wrapper">
            <h2 style={{padding:10}}>Plant Information</h2>
            <div className="plants">
    
                <div className="plant">
                <h6>Nimi: {plant.id}</h6>
                <h6>Tyyppi: {plant.type}</h6>
                <h6>Istutus päivä: {plant.istutuspv}</h6>
                <img alt="Broken" src={plant.imagefile} width="200" ></img>
                
                
                </div>
            </div>
            </div>
        </div>
    );
};


export default Plants;