import React from 'react';

export class IssueCard extends React.PureComponent {
  render() {
    const { card } = this.props;
    return (
      <div className="kanboard-card">
        <div className="box">
          <div className="media">
            {
              card.issue.assignee ?
              <div className="media-left">
                <figure className="image is-64x64">
                  <img src={card.issue.assignee.avatar_url} alt="Image" />
                </figure>
                <small>{`@${card.issue.assignee.login}`}</small>
              </div>
              : null
            }
            <div className="media-content">
              <div className="content">
                <p>
                  <strong>{`#${card.issue.number}`}</strong>&nbsp;
                  { card.issue.milestone ? <small>{`- ${card.issue.milestone.title}`}</small> : null }
                  <br />
                  <span className="is-size-6">{card.issue.title}</span>
                </p>
              </div>
            </div>
          </div>
          <div className="level is-mobile" style={{marginTop:'1rem'}}>
            <div className="level-left">
              <small className="level-item"><a href="#">{card.project}</a></small>
            </div>
            <div className="level-right">
                <a className="level-item" target="_blank" href={card.issue.url.replace('/api/v1/repos', '')}>
                  <span className="icon is-small has-text-info">
                    <i className="fas fa-search" aria-hidden="true"></i>
                  </span>
                </a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}