"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.MainContainer = exports.BlogItem = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _lib = require("@sentecacommerce-theme/lib");

var _Common = require("../../../../../Common");

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

var BlogItem = function BlogItem(_ref) {
  var _blogData$content$ima;

  var data = _ref.data,
      slug = _ref.slug;

  var _useConfigState = (0, _lib.useConfigState)(),
      imagesConfig = _useConfigState.imagesConfig,
      date = _useConfigState.date;

  var labels = (0, _lib.useLocalLabels)();

  var _useCmsContent = (0, _lib.useCmsContent)({
    data: data
  }),
      blogData = _useCmsContent.data;

  return /*#__PURE__*/_react["default"].createElement(_lib.Link, {
    href: "/blog/" + slug,
    passHref: true
  }, /*#__PURE__*/_react["default"].createElement(MainContainer, null, /*#__PURE__*/_react["default"].createElement(ImgContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.LazyImage, {
    src: (_blogData$content$ima = blogData == null ? void 0 : blogData.content.image) != null ? _blogData$content$ima : imagesConfig.fallbackImage,
    width: 320,
    height: 241
  })), /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(UploadDate, null, new Date(blogData == null ? void 0 : blogData.content.datePublished).toLocaleDateString(date.locale)), /*#__PURE__*/_react["default"].createElement(Title, null, blogData == null ? void 0 : blogData.content.name), /*#__PURE__*/_react["default"].createElement(Excerpt, {
    lines: 3,
    lineHeight: 14 * 1.75
  }, blogData == null ? void 0 : blogData.content.shortContent)), /*#__PURE__*/_react["default"].createElement(ReadMoreButton, null, labels.readMore)));
};

exports.BlogItem = BlogItem;

var MainContainer = _styledComponents["default"].a.attrs({
  className: 'd-flex flex-column flex-lg-row pb-3 p-lg-3 my-3 '
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  gap: 1rem;\n  width: 100%;\n\n  @media (min-width: ", ") {\n    gap: 2rem;\n    border: 1px solid ", ";\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.grey;
});

exports.MainContainer = MainContainer;

var ImgContainer = _styledComponents["default"].div.attrs({
  className: 'col-lg-3'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Content = _styledComponents["default"].div.attrs({
  className: 'd-flex flex-column'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var UploadDate = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: '7',
  className: 'my-1'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
var Title = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: '5',
  className: 'my-1'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: bold;\n"])));
var Excerpt = (0, _styledComponents["default"])(_lib.OverflowEllipsis).attrs({
  as: 'p',
  className: 'my-1'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.4rem;\n  line-height: 1.75;\n"])));
var ReadMoreButton = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'span',
  variant: '6',
  className: 'd-block d-lg-none'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-decoration: underline;\n  text-underline-offset: 0.5rem;\n"])));
//# sourceMappingURL=index.js.map