'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

require('./_commonjsHelpers-06173234.js');
var React = require('react');
var React__default = _interopDefault(React);
var moment = require('./moment-575fe24c.js');
var index$1 = require('./index-be0c82be.js');
require('./iconBase-68959171.js');
require('react-bootstrap/Badge');
require('./index.esm-ff47db6f.js');

var OncliveHero = function OncliveHero(props) {
  var client = props.client;

  var builder = index$1.imageUrlBuilder(client);
  function urlFor(source) {
    return builder.image(source).auto('format');
  }
  return React__default.createElement(
    'div',
    { className: 'article-group--container' },
    props.dataRecord.map(function (article, index) {
      var articleThumbnail = '';
      var articleAltText = article.title;
      if (article.thumbnail && article.thumbnail.asset) {
        articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
        articleAltText = article.thumbnail.asset.originalFileName;
      } else if (props.thumbnail) {
        articleThumbnail = props.thumbnail;
      }
      return React__default.createElement(
        'a',
        { key: index, href: '/view/' + article.url.current, className: 'article-group' },
        React__default.createElement(
          'figure',
          null,
          React__default.createElement('img', { src: articleThumbnail, alt: articleAltText })
        ),
        React__default.createElement(
          'div',
          { className: 'article-group--body' },
          React__default.createElement(
            'h2',
            null,
            article.title
          ),
          React__default.createElement('div', null),
          moment.moment(article.published).format('MMMM Do YYYY, h:mma'),
          article.authorMapping && article.authorMapping[0] && article.authorMapping[0].displayName && React__default.createElement(
            'p',
            { className: 'mb-2' },
            'By ',
            React__default.createElement(
              'b',
              null,
              article.authorMapping[0].displayName
            )
          ),
          React__default.createElement(
            'p',
            { className: 'article-group--summary' },
            article.summary
          )
        )
      );
    }),
    React__default.createElement(
      'style',
      { jsx: 'true' },
      '\n        .article-group--container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n        }\n        .article-group--container * {\n          transition: all 0.13s ease;\n        }\n        .article-group {\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0.5rem 1rem;\n          width: calc(50% - 2rem);\n          background: #fff;\n          min-width: 320px;\n          transition: all 0.1s ease-out;\n          border-top: 1px solid #eee;\n          position: relative;\n          overflow: hidden;\n        }\n\n        .article-group:nth-of-type(1) {\n          width: 100%;\n        }\n        .article-group:nth-of-type(1) .article-group--body {\n        }\n        .article-group:nth-of-type(1) figure img {\n          width: 225px;\n        }\n        .article-group:nth-of-type(1) .article-group--body h2 {\n          font-size: 1.4rem;\n        }\n        .article-group:nth-of-type(1) .article-group--summary {\n          display: block;\n        }\n        @media screen and (max-width: 1091px) {\n          .article-group:nth-of-type(1) {\n            width: 100%;\n          }\n          .article-group:nth-of-type(1) .article-group--summary {\n            display: none;\n          }\n          .article-group:nth-of-type(1) figure img {\n            width: 130px;\n          }\n          .article-group:nth-of-type(1) .article-group--body h2 {\n            font-size: 1rem;\n          }\n        }\n        .article-group figure {\n          margin-bottom: 0;\n        }\n        .article-group figure img {\n          height: 100%;\n          width: 130px;\n          object-fit: contain;\n        }\n\n        .article-group--body {\n          padding-left: 1rem;\n        }\n        .article-group--body p {\n          font-size: 0.9rem;\n        }\n        .article-group--body h2 {\n          font-weight: bold;\n          margin-top: 1rem;\n          font-size: 1rem;\n          padding-right: 0.5rem;\n        }\n        .article-group--summary {\n          font-size: 1rem;\n          display: none;\n        }\n      '
    )
  );
};

module.exports = OncliveHero;
