import React from "react";
import { CaretDownIcon } from "@phosphor-icons/react";
import { TitleIcon } from "../TitleIcon";
import { TitleText } from "../TitleText";
import * as styles from "./styles";
export const Accordion = ({ sectionHeaders, activeTabIndex, onTabChange, children, }) => (React.createElement("div", { className: styles.container }, sectionHeaders.map((section, index) => (React.createElement("div", { key: `section-accordion-${section.title}`, className: styles.item, onClick: () => onTabChange(activeTabIndex === index ? -1 : index), "data-active": activeTabIndex === index },
    React.createElement("div", { className: styles.header },
        React.createElement(TitleIcon, { icon: section.icon }),
        React.createElement(TitleText, { text: section.title, className: styles.title }),
        React.createElement(CaretDownIcon, { className: styles.arrowIcon, "data-is-active": activeTabIndex === index })),
    activeTabIndex === index && (React.createElement("div", { className: styles.content }, children)))))));
//# sourceMappingURL=index.js.map