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

var _templateObject;

import React from 'react';
import styled from 'styled-components';
import Link from 'next/link';
import { useBoolean } from '@sentecacommerce-theme/lib';
import { ArrowRight } from '../../../../Common';
import { MobileMenuSectionList } from '../MobileMenuSectionList';
import { MobileBrandSection } from '../MobileBrandSection';
export var MobileMenuItem = (_ref) => {
  var _data$tags, _data$linkUrl, _data$sections, _data$sections2;

  var {
    data,
    onItemClick,
    slideLeft,
    reset
  } = _ref;
  var [isExpanded, setIsExpanded] = useBoolean();

  var openSections = e => {
    e.preventDefault();
    slideLeft();
    setIsExpanded.on();
  };

  var isBrand = Boolean((_data$tags = data.tags) == null ? void 0 : _data$tags.includes('brands'));
  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Link, {
    href: (_data$linkUrl = data.linkUrl) != null ? _data$linkUrl : '#',
    passHref: true
  }, /*#__PURE__*/React.createElement(Name, {
    onClick: (_data$sections = data.sections) != null && _data$sections.length ? openSections : onItemClick
  }, data.name, /*#__PURE__*/React.createElement(ArrowRight, null))), Boolean(isExpanded && ((_data$sections2 = data.sections) == null ? void 0 : _data$sections2.length)) && /*#__PURE__*/React.createElement(React.Fragment, null, isBrand ? /*#__PURE__*/React.createElement(MobileBrandSection, {
    data: data,
    handleClose: setIsExpanded.off,
    onCloseStart: reset
  }) : /*#__PURE__*/React.createElement(MobileMenuSectionList, {
    parentName: data.name,
    data: data.sections,
    handleClose: setIsExpanded.off,
    onCloseStart: reset
  })));
};
var Name = styled.a.attrs({
  className: 'py-2 d-flex align-items-center justify-content-between'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  font-size: 2.4rem;\n  line-height: 1.3;\n"])));
//# sourceMappingURL=index.js.map