import React__default from 'react';
import './moment-bc12cb97.js';
import urlFor from './urlFor.js';
import { a as FaLongArrowAltRight } from './index.esm-1bd8a0a8.js';
import './_commonjsHelpers-0c4b6f40.js';
import './slicedToArray-6ebcbfea.js';
import './web.dom.iterable-ab4dea5c.js';
import './core.get-iterator-method-ea258bb1.js';
import './index-3f5c03b2.js';
import './iconBase-ccc56b97.js';

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


  var topArticle = props.dataRecord[0];
  var subArticles = props.dataRecord.slice(1, props.dataRecord.length);
  var _props$heroTitle = props.heroTitle,
      heroTitle = _props$heroTitle === undefined ? '' : _props$heroTitle,
      _props$borderColor = props.borderColor,
      borderColor = _props$borderColor === undefined ? 'black' : _props$borderColor;


  var topArticleThumbnail = '';
  var topArticleAltText = topArticle.title;
  if (topArticle.thumbnail && topArticle.thumbnail.asset) {
    topArticleThumbnail = urlFor({ client: client, source: topArticle.thumbnail.asset, imageWidth: 350 });

    topArticleAltText = topArticle.thumbnail.asset.originalFileName;
  }
  if (props.thumbnail) {
    topArticleThumbnail = props.thumbnail;
  }

  return React__default.createElement(
    'div',
    { className: 'horizontal-hero-container', style: { borderRight: '3px solid ' + borderColor, borderTop: '3px solid ' + borderColor } },
    React__default.createElement(
      'div',
      { className: 'horizontal-hero-title' },
      React__default.createElement(
        'h2',
        null,
        heroTitle
      ),
      React__default.createElement('div', null)
    ),
    React__default.createElement(
      'div',
      { className: 'horizontal-hero-inner' },
      React__default.createElement(
        'a',
        { href: '/view/' + topArticle.url.current, className: 'horizontal-hero-img' },
        React__default.createElement('img', { style: { objectFit: props.imageSize ? props.imageSize : 'cover' }, src: topArticleThumbnail, alt: topArticleAltText })
      ),
      React__default.createElement(
        'div',
        { className: 'horizontal-articles-wrap' },
        React__default.createElement(
          'a',
          { href: '/view/' + topArticle.url.current, className: 'horizontal-article' },
          React__default.createElement(
            'p',
            null,
            topArticle.title
          )
        ),
        subArticles.map(function (article, index) {
          return React__default.createElement(
            'a',
            { key: index, href: '/view/' + article.url.current, className: 'horizontal-article' },
            React__default.createElement(
              'p',
              null,
              article.title
            )
          );
        })
      )
    ),
    props.linkTo && React__default.createElement(
      'div',
      { className: 'horizontal-view-more' },
      React__default.createElement(
        'a',
        { href: props.linkTo },
        props.linkTitle ? props.linkTitle : 'View More' + heroTitle,
        ' ',
        ' ',
        React__default.createElement(
          'span',
          null,
          React__default.createElement(FaLongArrowAltRight, { color: 'var(--primary)' })
        )
      )
    ),
    React__default.createElement(
      'style',
      { jsx: 'true' },
      '\n        .horizontal-hero-container {\n          margin-bottom: 3rem;\n          margin-top: 2rem;\n          position: relative;\n        }\n        .horizontal-hero-title {\n          position: absolute;\n          top: -25px;\n          background: white;\n          z-index: 2;\n          padding-right: 1rem;\n          font-weight: bold;\n        }\n        .horizontal-hero-inner {\n          display: flex;\n          flex-direction: row;\n          padding-top: 0.75rem;\n          margin-top: 0.75rem;\n        }\n\n        .horizontal-articles-wrap {\n          padding: 0 1rem;\n          flex-basis: 60%;\n        }\n\n        .horizontal-hero-img {\n         flex-basis: 40%;\n        }\n        .horizontal-hero-img img {\n          width: 100%;\n          height: 100%;\n       \n        }\n        .horizontal-article {\n          border-bottom: 1px solid #ccc;\n          display: block;\n          margin-bottom: 0.5rem;\n        }\n        .horizontal-article:hover {\n          background: #eee;\n        }\n        .horizontal-article p {\n          font-size: 1.1rem;\n          margin-bottom: 0.5rem;\n          font-weight: bold;\n          color: #252525;\n        }\n        .horizontal-view-more {\n          position: absolute;\n          right: 0;\n          margin-top: 0.25rem;\n          font-weight: bold;\n        }\n        .horizontal-view-more span {\n          display: inline-block;\n          color: rgb(81, 116, 153);\n          font-size: 1.2rem;\n        }\n        @media screen and (max-width: 1191px){\n         \n            .horizontal-article > p {\n              font-size: 1rem;\n            }\n          }\n         \n        @media screen and (max-width: 768px) {\n          .horizontal-hero-img {\n            display: none;\n          }\n          .horizontal-articles-wrap {\n            \n            flex-basis: 100%;\n          }\n        }\n        @media screen and (max-width: 495px) {\n          \n          .horizontal-article > p {\n            font-size: 1rem;\n          }\n        }\n      '
    )
  );
};

export default HorizontalHero;
