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

var _templateObject, _templateObject2;

import React from 'react';
import styled from 'styled-components';
export var Tabs = (_ref) => {
  var {
    tabs,
    selected,
    onSelect: setSelectedTab
  } = _ref;
  return /*#__PURE__*/React.createElement(TabsWrapper, null, tabs.map((tab, index) => /*#__PURE__*/React.createElement(Tab, {
    className: selected === tab ? 'active' : '',
    key: index,
    onClick: () => setSelectedTab(tab)
  }, tab)));
};
var TabsWrapper = styled.div.attrs({
  className: 'mx-auto d-flex justify-content-around d-lg-none'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Tab = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.light;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.primary;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.secondary;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.primary;
});
//# sourceMappingURL=index.js.map