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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
import { useGlobalLabels } from '@sentecacommerce-theme/lib';
var LOGIN_CONST = 'Login';
var REGISTER_CONST = 'Register';

var Headers = (_ref) => {
  var {
    active,
    setActive
  } = _ref;
  var {
    buttons
  } = useGlobalLabels();
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Wrapper, {
    className: "pb-4"
  }, /*#__PURE__*/React.createElement(Header, {
    onClick: () => setActive(LOGIN_CONST)
  }, /*#__PURE__*/React.createElement(HeaderSpan, {
    className: "pb-4",
    isActive: active === LOGIN_CONST
  }, buttons.signIn)), /*#__PURE__*/React.createElement(Header, {
    onClick: () => setActive(REGISTER_CONST)
  }, /*#__PURE__*/React.createElement(HeaderSpan, {
    className: "pb-4",
    isActive: active === REGISTER_CONST
  }, buttons.register))));
};

export { Headers };
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  margin-top: 1.2rem;\n  margin-bottom: 2.4rem;\n"])));
var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  color: #b6b6b6;\n  text-align: center;\n  font-size: 17px;\n  font-weight: 600;\n"])));
var Header = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  flex: 50%;\n  cursor: pointer;\n"])));
var HeaderSpan = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), props => props.isActive && "\n  border-bottom: solid #222;\n  color: #222;\n  transition: all .2s;\n  ");
//# sourceMappingURL=index.js.map