import React from 'react';
import { m as moment } from './moment-bc12cb97.js';
import { i as imageUrlBuilder } from './index-0dbff1d1.js';
import { c as clean_html_1 } from './entities-932b50cf.js';
import { A as AuthorComponent } from './AuthorComponent-5ae7409f.js';
import { L as LazyLoad } from './index-35bdcc81.js';
import './_commonjsHelpers-0c4b6f40.js';
import './slicedToArray-be2f7a22.js';
import './web.dom.iterable-4109ff68.js';
import './es6.string.iterator-bc33758b.js';
import './_to-object-b50e61c3.js';
import './core.get-iterator-method-133dfacd.js';
import 'react-dom';
import 'prop-types';

var YahooHero = function YahooHero(props) {
  var removeTimeStamp = props.removeTimeStamp;

  var topArticle = props.dataRecord[0];
  var subArticles = props.dataRecord.slice(1, props.dataRecord.length);
  var client = props.client;

  var builder = imageUrlBuilder(client);
  function urlFor(source) {
    return builder.image(source).auto('format');
  }

  var topArticleThumbnail = '';
  var topArticleAltText = topArticle.title;
  if (topArticle.thumbnail && topArticle.thumbnail.asset) {
    topArticleThumbnail = urlFor(topArticle.thumbnail.asset).width(600).url();
    topArticleAltText = topArticle.thumbnail.asset.originalFileName;
  } else if (props.thumbnail) {
    topArticleThumbnail = props.thumbnail;
  }

  return React.createElement(
    'div',
    { className: 'article-hero' },
    React.createElement(
      'a',
      { href: '/view/' + topArticle.url.current },
      React.createElement(
        'div',
        { className: 'yh-top-article' },
        React.createElement(
          'div',
          { className: 'yh-top-article--img' },
          React.createElement('img', { src: topArticleThumbnail, alt: topArticleAltText })
        ),
        React.createElement('div', { className: 'yh-top-article--blur' }),
        React.createElement(
          'div',
          { className: 'yh-top-article--body' },
          React.createElement(
            'h1',
            null,
            topArticle.title
          ),
          React.createElement(
            'p',
            null,
            moment(topArticle.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM DD, YYYY hh:mma')
          ),
          React.createElement(
            'p',
            null,
            clean_html_1(topArticle.summary)
          )
        )
      )
    ),
    React.createElement(
      'div',
      { className: 'yh-sub-article-container' },
      subArticles.map(function (article, index) {
        var articleThumbnail = '';
        article.title;
        if (article.thumbnail && article.thumbnail.asset) {
          articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
          article.thumbnail.asset.originalFileName;
        } else if (props.thumbnail) {
          articleThumbnail = props.thumbnail;
        }

        return React.createElement(
          'div',
          { key: index, className: 'yh-sub-article' },
          React.createElement(
            'a',
            { href: '/view/' + article.url.current },
            React.createElement('img', { src: articleThumbnail })
          ),
          React.createElement(
            'a',
            { href: '/view/' + article.url.current },
            React.createElement(
              'h6',
              { className: 'yh-sub-article--title' },
              article.title
            )
          ),
          React.createElement(
            'p',
            { className: 'yh-sub-article--info' },
            moment(article.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM DD, YYYY hh:mma')
          ),
          article.authorMapping && article.authorMapping.length > 0 && React.createElement(
            LazyLoad,
            { height: 50 },
            React.createElement(AuthorComponent, { key: index.toString(), index: index, authors: article.authorMapping })
          )
        );
      })
    ),
    React.createElement(
      'style',
      { jsx: 'true' },
      '\n        .article-hero{\n          padding-bottom:15px\n        }\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: Roboto, sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 315px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          height: 315px;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article img[src=\'' + props.thumbnail + '\']{\n          object-fit: contain;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n\n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
    )
  );
};

export default YahooHero;
