"use strict";

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

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

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

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

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

var _templateObject, _templateObject2;

var Tabs = function Tabs(_ref) {
  var tabs = _ref.tabs,
      selected = _ref.selected,
      setSelectedTab = _ref.onSelect;
  return /*#__PURE__*/_react["default"].createElement(TabsWrapper, null, tabs.map(function (tab, index) {
    return /*#__PURE__*/_react["default"].createElement(Tab, {
      className: selected === tab ? 'active' : '',
      key: index,
      onClick: function onClick() {
        return setSelectedTab(tab);
      }
    }, tab);
  }));
};

exports.Tabs = Tabs;

var TabsWrapper = _styledComponents["default"].div.attrs({
  className: 'mx-auto d-flex justify-content-around d-lg-none'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Tab = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  outline: none;\n  border: none;\n  border-radius: 0;\n\n  flex: 1;\n  text-align: center;\n\n  border-bottom: 1px solid ", ";\n  color: ", ";\n  background-color: ", ";\n\n  &.active {\n    border-color: ", ";\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.light;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.primary;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.secondary;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.primary;
});
//# sourceMappingURL=index.js.map