"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.ListElement = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

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

var _link = _interopRequireDefault(require("next/link"));

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

var _index = require("../../../../Common/Typography/index");

var _templateObject, _templateObject2, _templateObject3;

var ListElement = function ListElement(_ref) {
  var url = _ref.url,
      label = _ref.label,
      isHighlighted = _ref.isHighlighted,
      _ref$Tag = _ref.Tag,
      Tag = _ref$Tag === void 0 ? 'div' : _ref$Tag,
      isExternal = _ref.isExternal;
  var CustomTag = "" + Tag;
  return /*#__PURE__*/_react["default"].createElement(CustomTag, null, url ? /*#__PURE__*/_react["default"].createElement(_link["default"], {
    prefetch: false,
    href: url,
    passHref: true
  }, /*#__PURE__*/_react["default"].createElement("a", {
    target: isExternal ? '_blank' : '_self'
  }, /*#__PURE__*/_react["default"].createElement(Wrapper, {
    as: "span",
    variant: isHighlighted ? 6 : 7,
    highlight: isHighlighted
  }, label))) : /*#__PURE__*/_react["default"].createElement(Wrapper, {
    highlight: isHighlighted
  }, label));
};

exports.ListElement = ListElement;
var Wrapper = (0, _styledComponents["default"])(_index.Typography)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  cursor: pointer;\n  transition: opacity 0.15s ease, color 0.15s ease;\n  display: inline-block;\n\n  ", "\n"])), function (props) {
  return props.highlight ? props.theme.palette.secondary : props.theme.palette.grey;
}, function (props) {
  return props.highlight ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n          text-transform: uppercase;\n          opacity: 1;\n          font-size: 14px;\n          :hover {\n            opacity: 0.8;\n          }\n        "]))) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n        &:hover {\n          color: ", ";\n        }\n  }\n"])), props.theme.palette.secondary);
});
//# sourceMappingURL=index.js.map