import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
const FAQComponent = ({ adTitle, faq }) => {
    const [openFAQ, setOpenFAQ] = useState(null); // Track which FAQ is open
    const toggleOpenFAQ = (index) => {
        setOpenFAQ(openFAQ === index ? null : index); // Toggle the open state for the clicked FAQ
    };
    return (_jsx(_Fragment, { children: faq && faq.length > 0 && (_jsxs("div", { id: "section6", className: "section-hm new-sect descrp2 faq-ite pb0", children: [_jsx("div", { className: "black-tran" }), _jsx("div", { className: "container", children: _jsxs("div", { className: "row at-center pt50 pb50", children: [_jsx("div", { className: "col-sm-5", children: _jsx("div", { className: "featured-title-hold text-center clearfix", children: _jsxs("h3", { className: "site-h1 animate", children: [_jsxs("div", { className: "line-container-parent", children: [_jsxs("div", { className: "lines-container flex-end", children: [_jsx("div", { className: "line small-line" }), _jsx("div", { className: "line big-line" })] }), _jsx("h5", { className: "line-text", children: "FAQ About" }), _jsxs("div", { className: "lines-container", children: [_jsx("div", { className: "line small-line" }), _jsx("div", { className: "line big-line" })] })] }), _jsx("p", { className: "site-h4", children: adTitle })] }) }) }), _jsx("div", { className: "col-sm-7", children: _jsx("div", { className: "pr15 ", children: _jsx("section", { className: "mt-5 p-0 mb-5", children: _jsxs("div", { className: "project-teams", id: "faq-it", children: [_jsxs("div", { className: "main_title_3", children: [_jsx("span", {}), _jsxs("h2", { children: ["FAQ about ", adTitle] })] }), faq.map((v, k) => (_jsxs("div", { className: `${openFAQ === k ? 'oplm' : ''} hdrfaq1`, children: [_jsxs("button", { onClick: () => toggleOpenFAQ(k), className: "expandable-section__StyledSectionHeader-sc-wc2yed-0 fvALIH", children: [_jsx("div", { className: "project-team-header__ProjectTeamHeaderContainer-sc-9ldys9-0 kZUEjI", children: _jsx("p", { className: "faq-quest", children: v.title }) }), _jsx("svg", { viewBox: "0 0 24 24", className: `ArrowDownLg__StyledSVG-sc-lpcous-0 kcSmXn expandable-section__IconDown-sc-wc2yed-3 eSnMeY ${openFAQ === k ? 'hidden' : ''}`, children: _jsx("path", { stroke: "currentColor", d: "M22 8L12 18 2 8", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("svg", { viewBox: "0 0 24 24", className: `ArrowUpLg__StyledSVG-sc-16exhyz-0 huziqX expandable-section__IconUp-sc-wc2yed-2 huDCpO `, children: _jsx("path", { stroke: "currentColor", d: "M22 16L12 6 2 16", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), openFAQ === k && (_jsx("section", { role: "region", "aria-labelledby": "developer-team-header", className: "expandable-section__StyledSectionPanel-sc-wc2yed-1 clAZGx", children: _jsx("p", { className: "faq-content", children: v.file }) }))] }, k)))] }) }) }) })] }) })] })) }));
};
export default FAQComponent;
