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

var _templateObject, _templateObject2, _templateObject3;

import React, { useEffect } from 'react';
import styled from 'styled-components';
import { useCmsContent, useConfigState } from '@sentecacommerce-theme/lib';
import { useRouter } from 'next/router';
import { Typography, Copy } from '../../../Common';
export var BlogPost = () => {
  var _data$content, _data$content2;

  var {
    date
  } = useConfigState();
  var router = useRouter();
  var {
    data,
    isError
  } = useCmsContent({
    key: router.query.slug
  });
  useEffect(() => {
    if (!data && isError) {
      router.push('/404');
    }
  }, [data, isError, router]);
  return /*#__PURE__*/React.createElement(BlogPostContent, null, /*#__PURE__*/React.createElement(CreationDate, null, new Date(data == null ? void 0 : data.content.datePublished).toLocaleDateString(date.locale)), /*#__PURE__*/React.createElement(Title, null, data == null ? void 0 : (_data$content = data.content) == null ? void 0 : _data$content.name), /*#__PURE__*/React.createElement(Copy, {
    html: data == null ? void 0 : (_data$content2 = data.content) == null ? void 0 : _data$content2.content
  }));
};
var BlogPostContent = styled.div.attrs({
  className: 'mb-5'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var CreationDate = styled(Typography).attrs({
  variant: '7',
  className: ''
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var Title = styled(Typography).attrs({
  variant: '2',
  as: 'h1',
  className: 'mt-2 mb-3'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n"])));
//# sourceMappingURL=index.js.map