import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import ScreenView from "../screen-view";
import { Content, Icon, ItemWrapper, Title, Wrapper } from "./styled";
import Icons from "../icons";
import TextBase from "../text";
const FaqItem = ({ title, text, iconColor, onClick }) => {
    const [openItem, setOpenItem] = React.useState(false);
    return (_jsxs(ItemWrapper, { className: "ui-faq__item", children: [_jsxs(Title, { onClick: () => {
                    !openItem && onClick && onClick();
                    setOpenItem(!openItem);
                }, className: "ui-faq__title", children: [_jsx(ScreenView.Large, { children: _jsx(TextBase.H2, { className: "ui-faq__title-desktop", children: title }) }), _jsx(ScreenView.NotLarge, { children: _jsx(TextBase.H3, { fontFamily: "ExtraBold", className: "ui-faq__title-mobile", children: title }) }), _jsx(Icon, { open: openItem, className: "ui-faq__icon-wrapper", children: _jsx(Icons.FaqPlus, { color: iconColor }) })] }), _jsx(Content, { open: openItem, className: "ui-faq__content", children: _jsx(TextBase.T4, { className: "ui-faq__content-text", children: text }) })] }));
};
const Faq = ({ items, iconColor }) => {
    return (_jsx(Wrapper, { className: "ui-faq", children: items.map((item, i) => (_jsx(FaqItem, { title: item.question, text: item.answer, iconColor: iconColor, onClick: item.onClick }, i))) }));
};
export default Faq;
//# sourceMappingURL=index.js.map