import './_commonjsHelpers-0c4b6f40.js';
import React from 'react';
import './moment-b6f49411.js';
import { i as imageUrlBuilder } from './index-51a80699.js';
import './iconBase-602d52fe.js';
import { a as FaLongArrowAltRight } from './index.esm-a8ff922c.js';

var RecentNews = function RecentNews(_ref) {
  var client = _ref.client,
      _ref$dataRecord = _ref.dataRecord,
      dataRecord = _ref$dataRecord === undefined ? [] : _ref$dataRecord,
      _ref$linkTo = _ref.linkTo,
      linkTo = _ref$linkTo === undefined ? '/news' : _ref$linkTo,
      _ref$borderColor = _ref.borderColor,
      borderColor = _ref$borderColor === undefined ? 'var(--primary)' : _ref$borderColor,
      _ref$heroTitle = _ref.heroTitle,
      heroTitle = _ref$heroTitle === undefined ? 'Latest News' : _ref$heroTitle,
      _ref$linkTitle = _ref.linkTitle,
      linkTitle = _ref$linkTitle === undefined ? 'View More ' : _ref$linkTitle;

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

  return React.createElement(
    'div',
    { className: 'recent-news-container', style: { border: '3px solid ' + borderColor } },
    React.createElement(
      'div',
      { className: 'recent-news-title' },
      React.createElement(
        'h2',
        null,
        heroTitle
      ),
      React.createElement('div', null)
    ),
    React.createElement(
      'div',
      { className: 'recent-news-inner' },
      React.createElement(
        'div',
        { className: 'recent-article-wrap', style: { flexBasis: '100%' } },
        React.createElement(
          'a',
          { href: '/view/' + topArticle.url.current, className: 'recent-article' },
          React.createElement(
            'p',
            null,
            topArticle.title
          )
        ),
        subArticles.map(function (article, index) {
          return React.createElement(
            'a',
            { key: index, href: '/view/' + article.url.current, className: 'recent-article' },
            React.createElement(
              'p',
              null,
              article.title
            )
          );
        })
      )
    ),
    linkTo && React.createElement(
      'div',
      { className: 'recent-view-more' },
      React.createElement(
        'a',
        { href: linkTo },
        linkTitle,
        React.createElement(
          'span',
          null,
          React.createElement(FaLongArrowAltRight, { color: 'var(--primary)' })
        )
      )
    ),
    React.createElement(
      'style',
      { jsx: 'true' },
      '\n        .recent-news-container {\n          margin-bottom: 1.7rem;\n          margin-top: 1rem;\n          position: relative;\n        }\n        .recent-news-title {\n          position: absolute;\n          top: -10px;\n          background: white;\n          z-index: 2;\n          left: 10px;\n          padding-right: 0.25rem;\n          padding-left: 0.25rem;\n          font-weight: bold;\n        }\n        .recent-news-title h2 {\n          font-size: 0.9rem;\n          font-weight: bold;\n        }\n        .recent-news-inner {\n          display: flex;\n          flex-direction: row;\n          padding-top: 0.75rem;\n          margin-top: 0.75rem;\n        }\n        .recent-article-wrap {\n          padding: 0 0.5rem;\n        }\n     \n        .recent-article {\n          border-bottom: 1px solid #ccc;\n          display: block;\n          margin-bottom: 0.5rem;\n        }\n        .recent-article:last-child {\n          border-bottom: none;\n        }\n        .recent-article:hover {\n          background: #eee;\n        }\n        .recent-article p {\n          font-size: 0.7rem;\n          margin-bottom: 0.5rem;\n          color: #252525;\n        }\n        .recent-view-more {\n          position: absolute;\n          right: 0;\n          margin-top: 0.25rem;\n          font-size: 0.7rem;\n          font-weight: bold;\n        }\n        .recent-view-more span {\n          display: inline-block;\n          color: rgb(81, 116, 153);\n          font-size: 0.7rem;\n        }\n        @media screen and (max-width: 1191px){\n         \n            .recent-article > p {\n              font-size: 0.7rem;\n            }\n          }\n        }\n        @media screen and (max-width: 495px) {\n          \n          .recent-article > p {\n            font-size: 0.7rem;\n          }\n        }\n      '
    )
  );
};

export default RecentNews;
