"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 _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"
})(["margin:", ";width:100%;@media (min-width:", "){margin:", ";}"], function (_ref) {
  var theme = _ref.theme;
  return "".concat(theme.spacing.s3, " 0");
}, _breakpoints.bpMedium, function (_ref2) {
  var theme = _ref2.theme;
  return "".concat(theme.spacing.s4, " 0");
});

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 (_ref3) {
  var theme = _ref3.theme;
  return theme.spacing.s2;
}, _breakpoints.bpMedium, _secondaryNavigation.getDesktopFontSize, function (_ref4) {
  var theme = _ref4.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(_ref5) {
  var navItems = _ref5.navItems;
  return /*#__PURE__*/_react["default"].createElement(StyledNav, {
    role: "navigation"
  }, /*#__PURE__*/_react["default"].createElement(StyledUl, null, navItems.map(function (_ref6) {
    var label = _ref6.label,
        href = _ref6.href,
        onClick = _ref6.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';