"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SecondaryNavigation = void 0;

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _breakpoints = require("../../../breakpoints");

var _typography = require("../../../mixins/typography");

var _spacing = require("../../../mixins/spacing");

var _secondaryNavigation = require("./secondary-navigation.css-rules");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var StyledNav = _styledComponents["default"].nav.withConfig({
  displayName: "StyledNav",
  componentId: "plm3vc-0"
})(["width:100%;&&&{", "}"], _spacing.getSpacingRules);

var StyledLi = _styledComponents["default"].li.withConfig({
  displayName: "StyledLi",
  componentId: "plm3vc-1"
})(["padding:0 ", ";margin:0;list-style:none;flex:0 0 auto;:first-of-type{padding-left:0;}@media (min-width:", "){font-size:", ";padding:0 ", ";}"], function (_ref) {
  var theme = _ref.theme;
  return theme.spacing.s2;
}, _breakpoints.bpMedium, _secondaryNavigation.getDesktopFontSize, function (_ref2) {
  var theme = _ref2.theme;
  return theme.spacing.s3;
});

var StyledUl = _styledComponents["default"].ul.withConfig({
  displayName: "StyledUl",
  componentId: "plm3vc-2"
})(["margin:0;padding:0;display:flex;align-items:center;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;overflow-x:auto;&::-webkit-scrollbar{display:none;}"]);

var StyledLink = _styledComponents["default"].a.withConfig({
  displayName: "StyledLink",
  componentId: "plm3vc-3"
})(["&&{font-family:", ";font-size:", ";font-weight:", ";color:", ";text-decoration:none;:hover{&&{color:", ";}}@media (min-width:", "){font-size:", ";}}"], _secondaryNavigation.getFontFamily, _secondaryNavigation.getMobileFontSize, (0, _typography.getFontWeight)({
  bold: true
}), _secondaryNavigation.getFontColor, _secondaryNavigation.getHoverFontColor, _breakpoints.bpMedium, _secondaryNavigation.getDesktopFontSize);

var SecondaryNavigation = function SecondaryNavigation(_ref3) {
  var navItems = _ref3.navItems,
      className = _ref3.className,
      _ref3$spacing = _ref3.spacing,
      spacing = _ref3$spacing === void 0 ? {
    sm: 'm4',
    md: 'm3'
  } : _ref3$spacing,
      dataQa = _ref3['data-qa'],
      dataCy = _ref3['data-cy'],
      id = _ref3.id;
  return /*#__PURE__*/_react["default"].createElement(StyledNav, {
    role: "navigation",
    spacing: spacing,
    className: className,
    "data-cy": dataCy,
    "data-qa": dataQa,
    id: id
  }, /*#__PURE__*/_react["default"].createElement(StyledUl, null, navItems.map(function (_ref4) {
    var label = _ref4.label,
        href = _ref4.href,
        onClick = _ref4.onClick;
    return /*#__PURE__*/_react["default"].createElement(StyledLi, {
      key: href
    }, /*#__PURE__*/_react["default"].createElement(StyledLink, {
      href: href,
      onClick: onClick
    }, label));
  })));
};

exports.SecondaryNavigation = SecondaryNavigation;
SecondaryNavigation.displayName = 'SecondaryNavigation';