import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;

import React from 'react';
import styled from 'styled-components';
import { useCmsContent, Link, OverflowEllipsis, useConfigState, useLocalLabels } from '@sentecacommerce-theme/lib';
import { Typography, LazyImage } from '../../../../../Common';
export var BlogItem = (_ref) => {
  var _blogData$content$ima;

  var {
    data,
    slug
  } = _ref;
  var {
    imagesConfig,
    date
  } = useConfigState();
  var labels = useLocalLabels();
  var {
    data: blogData
  } = useCmsContent({
    data
  });
  return /*#__PURE__*/React.createElement(Link, {
    href: "/blog/" + slug,
    passHref: true
  }, /*#__PURE__*/React.createElement(MainContainer, null, /*#__PURE__*/React.createElement(ImgContainer, null, /*#__PURE__*/React.createElement(LazyImage, {
    src: (_blogData$content$ima = blogData == null ? void 0 : blogData.content.image) != null ? _blogData$content$ima : imagesConfig.fallbackImage,
    width: 320,
    height: 241
  })), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(UploadDate, null, new Date(blogData == null ? void 0 : blogData.content.datePublished).toLocaleDateString(date.locale)), /*#__PURE__*/React.createElement(Title, null, blogData == null ? void 0 : blogData.content.name), /*#__PURE__*/React.createElement(Excerpt, {
    lines: 3,
    lineHeight: 14 * 1.75
  }, blogData == null ? void 0 : blogData.content.shortContent)), /*#__PURE__*/React.createElement(ReadMoreButton, null, labels.readMore)));
};
export var MainContainer = styled.a.attrs({
  className: 'd-flex flex-column flex-lg-row pb-3 p-lg-3 my-3 '
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  gap: 1rem;\n  width: 100%;\n\n  @media (min-width: ", ") {\n    gap: 2rem;\n    border: 1px solid ", ";\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.grey;
});
var ImgContainer = styled.div.attrs({
  className: 'col-lg-3'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var Content = styled.div.attrs({
  className: 'd-flex flex-column'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var UploadDate = styled(Typography).attrs({
  variant: '7',
  className: 'my-1'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
var Title = styled(Typography).attrs({
  variant: '5',
  className: 'my-1'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n"])));
var Excerpt = styled(OverflowEllipsis).attrs({
  as: 'p',
  className: 'my-1'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  font-size: 1.4rem;\n  line-height: 1.75;\n"])));
var ReadMoreButton = styled(Typography).attrs({
  as: 'span',
  variant: '6',
  className: 'd-block d-lg-none'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  text-decoration: underline;\n  text-underline-offset: 0.5rem;\n"])));
//# sourceMappingURL=index.js.map