import React from 'react';

const EditableRecipe = ({ recipe, onClose }) => {
  return (
    <div className="column is-one-third">
      <div className="card">
        <div className="card-image"></div>
        <div className="card-content">
          <div className="field">
            <label className="label">Title</label>
            <div className="control">
              <input
                name="title"
                className="input"
                type="text"
                placeholder={recipe.title}
                onBlur={() => console.log('updated')} />
            </div>
          </div>
          <br></br>
          <div className="field">
            <label className="label">Title</label>
            <div className="control">
              <textarea
                name="description"
                className="textarea"
                placeholder={recipe.description}
                onBlur={() => console.log('updated')} />
            </div>
          </div>
        </div>
        <a
          className="button is-dark"
          onClick={() => onClose()}>
            Close
        </a>
      </div>
    </div>
  )
}

export default EditableRecipe;