import React, { useState } from "react";
import styled from "styled-components";
import Flex from "../../layout/Flex";
const Item = styled(Flex).attrs({
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
}) `
  cursor: pointer;
  padding: 8px 12px 8px 12px;
  border-radius: ${p => p.theme.radii[2]}px;
  color: ${p => p.theme.colors.neutral.c100};
  background-color: ${p => (p.active ? p.theme.colors.primary.c30 : "unset")};
`;
export default function BarTabs({ children, onTabChange, initialActiveIndex }) {
    const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
    return (React.createElement(Flex, { justifyContent: "space-between", flex: 1, columnGap: 5 }, 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