"use strict";

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

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

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

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

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

var _lib = require("@sentecacommerce-theme/lib");

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var LOGIN_CONST = 'Login';
var REGISTER_CONST = 'Register';

var Headers = function Headers(_ref) {
  var active = _ref.active,
      setActive = _ref.setActive;

  var _useGlobalLabels = (0, _lib.useGlobalLabels)(),
      buttons = _useGlobalLabels.buttons;

  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Wrapper, {
    className: "pb-4"
  }, /*#__PURE__*/_react["default"].createElement(Header, {
    onClick: function onClick() {
      return setActive(LOGIN_CONST);
    }
  }, /*#__PURE__*/_react["default"].createElement(HeaderSpan, {
    className: "pb-4",
    isActive: active === LOGIN_CONST
  }, buttons.signIn)), /*#__PURE__*/_react["default"].createElement(Header, {
    onClick: function onClick() {
      return setActive(REGISTER_CONST);
    }
  }, /*#__PURE__*/_react["default"].createElement(HeaderSpan, {
    className: "pb-4",
    isActive: active === REGISTER_CONST
  }, buttons.register))));
};

exports.Headers = Headers;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-top: 1.2rem;\n  margin-bottom: 2.4rem;\n"])));

var Wrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  color: #b6b6b6;\n  text-align: center;\n  font-size: 17px;\n  font-weight: 600;\n"])));

var Header = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  flex: 50%;\n  cursor: pointer;\n"])));

var HeaderSpan = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  ", "\n"])), function (props) {
  return props.isActive && "\n  border-bottom: solid #222;\n  color: #222;\n  transition: all .2s;\n  ";
});
//# sourceMappingURL=index.js.map