import React from 'react';
import cx from 'classnames';
import StringHash from 'string-hash';
import { LinkTo } from '../LinkTo';
import { BackgroundImage } from '../../utils';
import { useDragonKitValue } from '../../context/DragonKitContext';

var ArticleContent = function ArticleContent(_ref) {
  var publishDate = _ref.publishDate,
      category = _ref.category,
      title = _ref.title;
  return /*#__PURE__*/React.createElement("div", {
    className: "content"
  }, /*#__PURE__*/React.createElement("div", {
    className: "inner"
  }, /*#__PURE__*/React.createElement("time", {
    dateTime: publishDate
  }, publishDate), /*#__PURE__*/React.createElement("div", {
    className: "category"
  }, category), /*#__PURE__*/React.createElement("h2", {
    className: "title"
  }, /*#__PURE__*/React.createElement("span", null, title))));
};

var ArticleCard = function ArticleCard(_ref2) {
  var category = _ref2.category,
      publishDate = _ref2.publishDate,
      title = _ref2.title,
      slug = _ref2.slug,
      image = _ref2.image;

  var _useDragonKitValue = useDragonKitValue(),
      dragonKit = _useDragonKitValue[0];

  var hash = image && StringHash(image);
  var imageClasses = cx('img', "rbiHandler-" + hash);
  return /*#__PURE__*/React.createElement("div", {
    className: "blog-article-card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "inner"
  }, /*#__PURE__*/React.createElement(LinkTo, {
    type: "route",
    url: "" + dragonKit.blogUrl + slug
  }, /*#__PURE__*/React.createElement(ArticleContent, {
    publishDate: publishDate,
    category: category,
    title: title
  }), /*#__PURE__*/React.createElement("div", {
    className: "image"
  }, BackgroundImage(image, hash), /*#__PURE__*/React.createElement("div", {
    className: "inner"
  }, /*#__PURE__*/React.createElement("div", {
    className: imageClasses
  }), /*#__PURE__*/React.createElement("img", {
    src: image,
    alt: "blockchain article"
  }))))));
};

ArticleCard.displayName = 'Article Card';
var ArticleCardDoc;

if (process.env.NODE_ENV !== 'production') {
  // eslint-disable-next-line global-require
  ArticleCardDoc = require('./doc').doc(ArticleCard);
}

var ArticleCardWrapper = ArticleCardDoc || ArticleCard;
export { ArticleCardWrapper as ArticleCard };