var PostCard = function (props) {
  var post = props.post;
  var index = props.index;
  var navigate = props.navigate;

  var date = new Date(post.published_at);
  var months = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
  var dateStr = months[date.getMonth()] + ' ' + String(date.getDate()).padStart(2, '0');
  var idx = String(index + 1).padStart(3, '0');
  var tag = post.primary_tag ? post.primary_tag.name : '';
  var author = post.primary_author ? post.primary_author.name : '';

  var handleClick = function (e) {
    e.preventDefault();
    navigate && navigate('blog/' + post.slug);
  };

  return (
    <a href={'/blog/' + post.slug} className="ib-post-row" onClick={handleClick}>
      <span className="ib-post-idx">{idx}</span>
      <span className="ib-post-date">{dateStr}</span>
      <span className="ib-post-tag">{tag}</span>
      <span className="ib-post-title">
        {post.title}
        {post.featured && <span className="ib-post-featured">★</span>}
      </span>
      <span className="ib-post-author">{author}</span>
    </a>
  );
};

window.PostCard = PostCard;