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