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

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

import React from 'react';
import styled from 'styled-components';
import { useCmsContent, Link } from '@sentecacommerce-theme/lib';
import { useRouter } from 'next/router';
import { Contacts } from './Components/Contacts';
import { Spinner } from '../Common';
export var HelpPage = (_ref) => {
  var {
    contacts
  } = _ref;
  var router = useRouter();
  var {
    data,
    isLoading
  } = useCmsContent({
    key: router.query.contentKey
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Link, {
    href: '/help'
  }, /*#__PURE__*/React.createElement(Title, null, data == null ? void 0 : data.typeName)), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Content, null, !isLoading ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TitleContainer, null, /*#__PURE__*/React.createElement("h2", null, data == null ? void 0 : data.content.name)), /*#__PURE__*/React.createElement("div", {
    dangerouslySetInnerHTML: {
      __html: data == null ? void 0 : data.content.content
    }
  })) : /*#__PURE__*/React.createElement(Spinner, null)), /*#__PURE__*/React.createElement(ContactsWrapper, null, /*#__PURE__*/React.createElement(ContactsTitleContainer, null, /*#__PURE__*/React.createElement("h2", null, contacts == null ? void 0 : contacts.title), /*#__PURE__*/React.createElement("h5", null, contacts == null ? void 0 : contacts.subtitle)), /*#__PURE__*/React.createElement(Contacts, {
    contacts: contacts
  }))));
};
var Container = styled.div.attrs({
  className: 'd-flex'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  @media (max-width: ", ") {\n    flex-direction: column;\n  }\n\n  @media (min-width: ", ") {\n    margin: 8rem 12rem;\n    border: 1px solid ", ";\n  }\n"])), props => props.theme.breakpoints.md.max, props => props.theme.breakpoints.lg.min, props => props.theme.palette.grey);
var Content = styled.div.attrs({
  className: 'col py-4'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  padding: 5rem;\n  @media (max-width: ", ") {\n    padding: 3rem;\n  }\n"])), props => props.theme.breakpoints.sm.max);
var TitleContainer = styled.div.attrs({
  className: 'pb-3 mb-3'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var Title = styled.h1.attrs({
  className: 'mt-5 mb-4'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  cursor: pointer;\n"])));
var ContactsWrapper = styled.div.attrs({
  className: 'col-lg-3 d-flex flex-column'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  padding: 0 5rem;\n\n  @media (min-width: ", ") {\n    border-left: 1px solid ", ";\n    align-items: center;\n    text-align: center;\n  }\n  @media (max-width: ", ") {\n    padding: 0 3rem;\n  }\n"])), props => props.theme.breakpoints.lg.min, props => props.theme.palette.grey, props => props.theme.breakpoints.sm.min);
var ContactsTitleContainer = styled.div.attrs({
  className: 'py-4'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    padding: 0 5rem;\n  }\n"])), props => props.theme.breakpoints.lg.min);
//# sourceMappingURL=helpPage.component.js.map