import React from 'react';
import './moment-bc12cb97.js';
import urlFor from './urlFor.js';
import './_commonjsHelpers-0c4b6f40.js';
import './slicedToArray-ca2c8b8d.js';
import './web.dom.iterable-fdf034f5.js';
import './core.get-iterator-method-e903ff31.js';
import './index-0dbff1d1.js';

var VerticalHero = function VerticalHero(props) {
  var client = props.client;
  var _props$heroTitle = props.heroTitle,
      heroTitle = _props$heroTitle === undefined ? '' : _props$heroTitle;


  return React.createElement(
    'div',
    { className: 'vertical-hero-container' },
    React.createElement(
      'div',
      { className: 'vertical-hero-inner' },
      React.createElement(
        'div',
        { className: 'hero-title' },
        React.createElement(
          'h2',
          null,
          heroTitle
        )
      ),
      props.dataRecord.map(function (article, index) {
        var articleThumbnail = '';
        var articleAltText = article.title;
        if (article.thumbnail && article.thumbnail.asset) {
          articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 500 });
          articleAltText = article.thumbnail.asset.originalFileName;
        } else if (props.thumbnail) {
          articleThumbnail = props.thumbnail;
        }
        return index === 0 ? React.createElement(
          'a',
          { href: '/view/' + article.url.current, key: index, className: 'vertical-article' },
          React.createElement('img', { src: articleThumbnail, alt: articleAltText }),
          React.createElement(
            'h2',
            null,
            article.title
          )
        ) : React.createElement(
          'a',
          { href: '/view/' + article.url.current, className: 'vertical-article' },
          React.createElement(
            'h2',
            null,
            article.title
          )
        );
      })
    ),
    React.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      '
    )
  );
};

export default VerticalHero;
