import React from 'react'
import { Table, Button } from 'react-bootstrap';

const Plants = ({plants, deletePlant}) => {

  return (
      <>
        {
            plants.length !== 0 ?
            <Table striped bordered hover>
                <thead>
                    <tr>
                    <th>Plant name</th>
                    <th>Plant type</th>
                    <th></th>
                    </tr>
                </thead>
                <tbody>
                {
                    plants.map((plant, index) => {
                        return <tr key={index}>
                                    <td>{plant.name}</td>
                                    <td>{plant.type}</td>
                                    <td><Button onClick={()=>{deletePlant(plant.id)}}>Delete</Button></td>
                                </tr>
                    })
                }
                </tbody>
            </Table> 
            : null
        }
      </> 
    );

}

export default Plants