import React from "react";
import { TitleText } from "../TitleText";
import { TitleIcon } from "../TitleIcon";
import * as styles from "./styles";
export const Tabs = ({ sectionHeaders, activeTabIndex, onTabChange, children, }) => (React.createElement(React.Fragment, null,
    React.createElement("div", { className: styles.container },
        React.createElement("div", { className: styles.tabsContainer }, sectionHeaders.map((section, index) => (React.createElement("div", { key: `section-tab-${section.title}`, className: styles.tab, onClick: () => onTabChange(index), "data-active": activeTabIndex === index },
            React.createElement(TitleIcon, { icon: section.icon }),
            React.createElement(TitleText, { text: section.title }))))),
        React.createElement("div", { className: styles.borderContainer }, sectionHeaders.map((section, index) => (React.createElement("div", { key: `section-tab-border-${section.title}`, className: styles.itemActiveBorder, "data-active": activeTabIndex === index }))))),
    React.createElement("div", { className: styles.content }, children)));
//# sourceMappingURL=index.js.map