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

var _templateObject, _templateObject2;

import React from 'react';
import { useGlobalLabels, useLocalLabels } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { ArrowLeft } from '../../../../Common';
import { AnimatedDrawer } from '../AnimatedDrawer';
import { MobileMenuItemList } from '../MobileMenuItemList';
import { MobileBrandList } from '../MobileBrandList';
export var MobileBrandSection = (_ref) => {
  var {
    data,
    handleClose,
    onCloseStart
  } = _ref;
  var {
    featuredBrands
  } = useLocalLabels();
  var {
    back
  } = useGlobalLabels().buttons;
  return /*#__PURE__*/React.createElement(AnimatedDrawer, {
    isLeft: null,
    handleClose: handleClose,
    onCloseStart: onCloseStart
  }, hideMenu => {
    var _data$sections;

    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BackButton, {
      onClick: hideMenu
    }, /*#__PURE__*/React.createElement(ArrowLeft, null), " ", /*#__PURE__*/React.createElement("span", {
      className: "ml-3"
    }, back)), /*#__PURE__*/React.createElement(ParentName, null, featuredBrands), /*#__PURE__*/React.createElement("ul", null, (_data$sections = data.sections) == null ? void 0 : _data$sections.map(section => {
      if (section.hideOnMobile) return null;
      return section.items.map(item => /*#__PURE__*/React.createElement(React.Fragment, {
        key: "Item__" + item._id
      }, /*#__PURE__*/React.createElement(MobileMenuItemList, {
        items: item.data.before
      }), /*#__PURE__*/React.createElement(MobileBrandList, {
        brands: item.data.items
      }), /*#__PURE__*/React.createElement(MobileMenuItemList, {
        items: item.data.after
      })));
    })));
  });
};
var BackButton = styled.button.attrs({
  className: 'd-flex align-items-center justify-content-start mb-4 pt-2'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  line-height: 1;\n  padding: 0.8rem 0 0 0 !important;\n  height: auto !important;\n  min-height: 0 !important;\n  min-width: 0 !important;\n  width: 100% !important;\n  text-align: left;\n\n  & span {\n    line-height: 0;\n    margin-bottom: -0.2rem;\n    font-weight: bold;\n    font-size: 1.4rem;\n  }\n"])));
var ParentName = styled.div.attrs({
  className: 'pb-3 pt-3'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  font-size: 2.4rem;\n  line-height: 1.6667;\n"])));
//# sourceMappingURL=index.js.map