import React__default from 'react';
import { m as moment } from './moment-48faeb9c.js';
import 'react-bootstrap/Media';
import urlFor from './urlFor.js';
import { L as LazyLoad } from './index-755f2cc2.js';
import './_commonjsHelpers-0c4b6f40.js';
import './slicedToArray-72ed566b.js';
import './web.dom.iterable-3fffc027.js';
import './core.get-iterator-method-95db387d.js';
import './extends-2f4448b8.js';
import './index-3f5c03b2.js';
import 'react-dom';
import 'prop-types';

/*
Sample query
                let references = ''
                if(article.taxonomyMapping.length > 0){
                    article.taxonomyMapping.forEach((ref, index) => {
                    references = references + `references('${ref._ref}') `
                    if(index+1 !== article.taxonomyMapping.length){
                        references = references + ` && `
                    }
                    })
                }
                
                const relatedArticlesQuery = `*[!(_id in path("drafts.**")) && _type == "article" && title !='${article.title}' && defined(title) && is_visible == true && ( references('article.documentGroup._id') || ${references} ) && published <= '${today}'] | order(published desc) [0...4] {
                    ...,
                    title,
                    summary,
                    thumbnail,
                    url,
                    published,
                    authorMapping[]->,
                    contentCategory->
                }`
                const relatedArticles = await client.fetch(relatedArticlesQuery)

Sample usage
            <RelatedContent dataRecord={props.relatedArticles} client={client} showAuthor showPublished reverse/>


*/
var RelatedContent = function RelatedContent(props) {
  var client = props.client,
      dataRecord = props.dataRecord,
      _props$defaultImage = props.defaultImage,
      defaultImage = _props$defaultImage === undefined ? '' : _props$defaultImage;


  return React__default.createElement(
    'div',
    null,
    React__default.createElement(
      'h1',
      { className: 'mb-4 pb-2', style: { borderBottom: '1px solid #ccc', fontSize: '1.2rem', fontWeight: 'bold', color: '#252525' } },
      'Related Content'
    ),
    React__default.createElement(
      'div',
      { className: 'related-articles-container' },
      dataRecord.map(function (article, index) {
        return React__default.createElement(
          'a',
          { key: index, href: '/view/' + article.url.current, className: 'related-article' },
          React__default.createElement(
            'figure',
            null,
            React__default.createElement(
              LazyLoad,
              { once: true },
              React__default.createElement('img', {
                src: article.thumbnail ? urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 500 }) : defaultImage,
                alt: article.title
              })
            )
          ),
          React__default.createElement(
            'div',
            { className: 'related-article-body' },
            React__default.createElement('h4', { dangerouslySetInnerHTML: { __html: article.title } }),
            props.showPublished && React__default.createElement(
              'p',
              { className: 'pb-0 mb-0' },
              moment(article.published).format('MMMM DD, YYYY hh:mma')
            ),
            props.showAuthor && article.authorMapping && article.authorMapping[0] && React__default.createElement(
              'p',
              null,
              'By ',
              React__default.createElement(
                'b',
                null,
                article.authorMapping[0].displayName
              )
            )
          )
        );
      }),
      React__default.createElement(
        'style',
        { jsx: 'true' },
        '\n          .related-article {\n            width: 100%;\n            display: flex;\n            flex-direction: ' + (props.reverse ? 'row-reverse' : 'row') + ';\n            margin-bottom: 1rem;\n          }\n          .related-article figure {\n            width: 165px;\n            height: 110px;\n            min-width: 165px;\n          }\n          .related-article figure img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n          }\n          .related-article-body {\n            flex: 1 1 auto;\n            padding: 0 1rem;\n          }\n          .related-article-body h4 {\n            font-weight: bold;\n            font-size: 1.1rem;\n            margin-bottom: 0.25rem;\n            line-height: 1.3;\n          }\n          @media screen and (max-width: 430px) {\n            .related-article {\n              flex-direction: column;\n            }\n            .related-article figure {\n              width: 80%;\n              height: auto;\n              min-width: 80%;\n              margin: 0 auto;\n            }\n            .related-article figure img {\n              width: 100%;\n              height: auto;\n              object-fit: cover;\n            }\n          }\n        '
      )
    )
  );
};

export { RelatedContent as default };
