import React, { useState } from "react";
import styled from "styled-components";
import Flex from "../../layout/Flex";
const Bar = styled.div `
  display: inline-flex;
  border: 1px solid ${p => p.theme.colors.neutral.c40};
  border-radius: 33px;
  padding: 2px;
`;
const Item = styled(Flex).attrs({
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
}) `
  cursor: pointer;
  padding: 8px 12px 8px 12px;
  border-radius: 33px;
  color: ${p => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c80)};
  background-color: ${p => (p.active ? p.theme.colors.neutral.c100 : "unset")};
`;
export default function BarTabs({ children, onTabChange, initialActiveIndex }) {
    const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
    return (React.createElement(Bar, null, React.Children.toArray(children).map((child, index) => (React.createElement(Item, { key: index, active: index === activeIndex, onClick: () => {
            setActiveIndex(index);
            onTabChange && onTabChange(index);
        } }, child)))));
}
//# sourceMappingURL=index.js.map