import React from 'react';

export class BoardCard extends React.PureComponent {
  render() {
    const { board } = this.props;
    return (
      <div className="box">
        <div className="media">
          <div className="media-content">
            <div className="content">
              <p>
                <a href={`#/boards/${board.id}`}>
                  <strong className="is-size-4">{board.title}</strong>
                </a>
                <br />
                {board.description}
              </p>
            </div>
          </div>
        </div>
        <div className="level is-mobile">
          <div className="level-left"></div>
          <div className="level-right">
            <a className="level-item" aria-label="edit" href={`#/boards/${board.id}/edit`}>
              <span className="icon is-small">
                <i className="fas fa-edit" aria-hidden="true"></i>
              </span>
            </a>
            <a className="level-item" aria-label="delete" href={`#/boards/${board.id}/delete`}>
              <span className="icon is-small has-text-danger">
                <i className="fas fa-trash-alt" aria-hidden="true"></i>
              </span>
            </a>
          </div>
        </div>
      </div>
    );
  }

}