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

var _templateObject, _templateObject2, _templateObject3;

import React from 'react';
import styled, { css } from 'styled-components';
import { Link } from '@sentecacommerce-theme/lib';
import { MenuItemList } from '../MenuItemList';
export var MenuSectionList = (_ref) => {
  var {
    sections,
    isActive
  } = _ref;
  return /*#__PURE__*/React.createElement(React.Fragment, null, sections == null ? void 0 : sections.map(section => {
    var _section$items;

    return /*#__PURE__*/React.createElement(Column, {
      key: section._id,
      className: "pt-3 px-2",
      isActive: isActive
    }, /*#__PURE__*/React.createElement(React.Fragment, {
      key: 'DropdownItem-' + section.linkUrl
    }, /*#__PURE__*/React.createElement(Link, {
      href: section.linkUrl || '/',
      passHref: true
    }, /*#__PURE__*/React.createElement(DropdownItem, {
      isHeader: true
    }, section == null ? void 0 : section.name)), (_section$items = section.items) == null ? void 0 : _section$items.map(item => {
      var _item$data, _item$data2, _item$data3;

      return /*#__PURE__*/React.createElement(React.Fragment, {
        key: item._id
      }, /*#__PURE__*/React.createElement(MenuItemList, {
        items: item == null ? void 0 : (_item$data = item.data) == null ? void 0 : _item$data.before
      }), /*#__PURE__*/React.createElement(MenuItemList, {
        items: item == null ? void 0 : (_item$data2 = item.data) == null ? void 0 : _item$data2.items
      }), /*#__PURE__*/React.createElement(MenuItemList, {
        items: item == null ? void 0 : (_item$data3 = item.data) == null ? void 0 : _item$data3.after
      }));
    })));
  }));
};
var Column = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  opacity: 0;\n  transform: translateY(-10px);\n  transition: transform 0.1s, opacity 0.1s;\n  transition-delay: 0s;\n  text-align: left;\n  line-height: 1.75;\n  width: 16.666666666666664%;\n  vertical-align: top;\n\n  ", "\n"])), props => props.isActive && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n      transform: translateY(0);\n      transition: transform 0.3s ease, opacity 0.2s linear;\n      transition-delay: 0.2s;\n    "]))));
export var DropdownItem = styled.a(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  font-size: 1.4rem;\n  line-height: 1.428571;\n  cursor: pointer;\n  color: ", ";\n  font-weight: 500;\n  margin-bottom: 6px;\n  text-align: left;\n  display: block;\n  text-decoration: none;\n\n  &.promotion,\n  &.red {\n    color: ", " !important;\n    opacity: 1 !important;\n  }\n\n  &.bold {\n    font-weight: bold;\n  }\n\n  ", "\n\n  ", "\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.hint;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.discount;
}, props => !props.isHeader && "\n  :hover {\n    color: " + props.theme.palette.primary + ";\n    transition: color .2s;\n  }\n  ", props => props.isHeader && "\n      margin-top: 14px;\n      margin-bottom: 14px;\n      color: " + props.theme.palette.primary + ";\n      font-size: 1.6rem;\n  ");
//# sourceMappingURL=index.js.map