import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';

export default function Modal(props){
  const state = {
    modal: false
  }

  function toggle(){
    this.setState({
      modal: !this.state.modal
    });
  }

  return (
    <MDBContainer>
      <MDBModal isOpen={this.state.modal} toggle={this.toggle}>
        <MDBModalHeader toggle={this.toggle}>{props.item.title}</MDBModalHeader>
        <MDBModalBody>
        <h2>Description</h2>
        <p>{props.item.content}</p>
        </MDBModalBody>
        <MDBModalFooter>
          <MDBBtn color="secondary" onClick={this.toggle}>Close</MDBBtn>
          <MDBBtn color="primary">Save changes</MDBBtn>
        </MDBModalFooter>
      </MDBModal>
    </MDBContainer>
    );
}