'use strict';

var React = require('react');
require('./moment-aca40de1.js');
var index = require('./index-efca863c.js');
require('./_commonjsHelpers-06173234.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

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

  var builder = index.imageUrlBuilder(client);
  function urlFor(source) {
    return builder.image(source).auto('format');
  }
  var _props$heroTitle = props.heroTitle,
      heroTitle = _props$heroTitle === undefined ? '' : _props$heroTitle;


  return React__default['default'].createElement(
    'div',
    { className: 'vertical-hero-container' },
    React__default['default'].createElement(
      'div',
      { className: 'vertical-hero-inner' },
      React__default['default'].createElement(
        'div',
        { className: 'hero-title' },
        React__default['default'].createElement(
          'h2',
          null,
          heroTitle
        )
      ),
      props.dataRecord.map(function (article, index) {
        var articleThumbnail = '';
        var articleAltText = article.title;
        if (article.thumbnail && article.thumbnail.asset) {
          articleThumbnail = urlFor(article.thumbnail.asset).width(500).url();
          articleAltText = article.thumbnail.asset.originalFileName;
        } else if (props.thumbnail) {
          articleThumbnail = props.thumbnail;
        }
        return index === 0 ? React__default['default'].createElement(
          'a',
          { href: '/view/' + article.url.current, key: index, className: 'vertical-article' },
          React__default['default'].createElement('img', { src: articleThumbnail, alt: articleAltText }),
          React__default['default'].createElement(
            'h2',
            null,
            article.title
          )
        ) : React__default['default'].createElement(
          'a',
          { href: '/view/' + article.url.current, className: 'vertical-article' },
          React__default['default'].createElement(
            'h2',
            null,
            article.title
          )
        );
      })
    ),
    React__default['default'].createElement(
      'style',
      { jsx: 'true' },
      '\n        .vertical-hero-container {\n          display: flex;\n          flex-direction: row;\n          padding: 0.25rem;\n          justify-content: space-between;\n          width: 100%;\n          flex: 1 1 auto;\n        }\n        .hero-title h2 {\n          font-size: 1.2rem;\n          font-weight: bold;\n        }\n        .vertical-article {\n          display: block;\n        }\n        .vertical-article img {\n          width: 100%;\n          height: auto;\n          min-width: 200px;\n        }\n        .vertical-article h2 {\n          font-size: 0.9rem;\n          color: #252525;\n          font-weight: bold;\n          padding: 0.5rem 0.5rem 1rem;\n          margin: 0.5rem;\n          border-bottom: 1px solid #ccc;\n        }\n      '
    )
  );
};

module.exports = VerticalHero;
