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

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

import React from 'react';
import styled from 'styled-components';
import { Contacts } from './Components/Contacts';
import { QuickAssists } from './Components/QuickAssists';
import { Typography } from '../Common/Typography';
export var HelpCenter = (_ref) => {
  var {
    quickAssists,
    contacts,
    title
  } = _ref;
  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(QuickAssistsContent, null, /*#__PURE__*/React.createElement(QuickAssistsTitle, null, /*#__PURE__*/React.createElement("h2", null, quickAssists == null ? void 0 : quickAssists.title), /*#__PURE__*/React.createElement("h5", null, quickAssists == null ? void 0 : quickAssists.subtitle)), /*#__PURE__*/React.createElement(QuickAssists, {
    quickAssists: quickAssists
  })), /*#__PURE__*/React.createElement(ContactsContentWrapper, null, /*#__PURE__*/React.createElement(ContactsTitleContainer, null, /*#__PURE__*/React.createElement(ContactsTitle, null, contacts == null ? void 0 : contacts.title), /*#__PURE__*/React.createElement("h5", null, contacts == null ? void 0 : contacts.subtitle)), /*#__PURE__*/React.createElement(ContactsContent, null, /*#__PURE__*/React.createElement(Contacts, {
    contacts: contacts
  })))));
};
var Wrapper = styled.div.attrs({
  className: ''
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Container = styled.div.attrs({
  className: ''
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    margin: 6rem 12rem;\n    padding: 1rem 6rem;\n    border: 1px solid ", ";\n  }\n\n  @media (max-width: ", ") {\n    margin: 2rem;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.max;
}, props => props.theme.palette.grey, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.md.max;
});
var QuickAssistsContent = styled.div.attrs({
  className: 'row'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var QuickAssistsTitle = styled.div.attrs({
  className: 'py-4'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  padding: 0;\n\n  border-bottom: 1px solid ", ";\n  @media (max-width: ", ") {\n    padding: 0 0.7rem;\n  }\n  @media (max-width: ", ") {\n    padding-left: 3.2rem;\n  }\n"])), props => props.theme.palette.grey, props => props.theme.breakpoints.sm.min, props => props.theme.breakpoints.md.max);
var Title = styled.h1.attrs({
  className: 'm-5'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n"])));
var ContactsContentWrapper = styled.div.attrs({
  className: 'row'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
var ContactsContent = styled.div.attrs({
  className: 'row m-0 px-3'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([""])));
var ContactsTitleContainer = styled.div.attrs({
  className: 'py-3'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid ", ";\n\n  padding: 0;\n\n  @media (max-width: ", ") {\n    padding: 0 0.7rem;\n  }\n  @media (max-width: ", ") {\n    padding-left: 3.2rem;\n  }\n"])), props => props.theme.palette.grey, props => props.theme.breakpoints.sm.min, props => props.theme.breakpoints.md.max);
var ContactsTitle = styled(Typography).attrs({
  as: 'h2',
  variant: 2
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), props => props.theme.breakpoints.md.min);
//# sourceMappingURL=helpCenter.component.js.map