const questions = props.questions || [ { question: "How to use widget?", answer: "FAQ Widget has 2 props: questions, supportEmail. questions is an array of objects with 2 keys: question typeof String and answer typeof String. supportEmail is a String", }, ]; const supportEmail = props.supportEmail || "support@coaty.world"; const questionSectionClass = { background: "#fff", border: "1px solid #d6e0f1", borderRadius: "10px", marginBottom: "16px", color: "#383e4d", overflow: "hidden", }; const accordionItems = questions.map((item, id) => { const collapseTarget = `collapse${id}`; const headerTarget = `heading${id}`; return ( <div className="accordion-item" style={questionSectionClass}> <h4 class="accordion-header" id={headerTarget}> <button className="accordion-button collapsed" style={{ fontSize: "21px", fontWeight: "500", boxShadow: "none" }} type="button" data-bs-toggle="collapse" data-bs-target={`#${collapseTarget}`} aria-expanded="false" aria-controls={collapseTarget} > {item.question} </button> </h4> <div id={collapseTarget} className="accordion-collapse collapse" aria-labelledby={headerTarget} data-bs-parent="#faq" > <div className="accordion-body">{item.answer}</div> </div> </div> ); }); const accordion = ( <div class="accordion" id="faq"> {accordionItems} </div> ); const supportTeamSection = ( <div className="mt-5 text-center"> <h6 className="mb-3 text-uppercase" style={{ fontWeight: 600 }}> Support team </h6> <h3>Still have questions?</h3> <p className="h2-description mt-3 faq__support-text"> If you cannot find an answer to your question in our FAQ, you can always contact us. We will answer you shortly! </p> <p className="mt-4 steps__btn-container"> <a type="button" className="btn btn-primary" href={`mailto:${supportEmail}`} > Contact Us </a> </p> </div> ); return ( <div className="row"> <div className="col-12">{accordion}</div> <div className="col-12">{supportTeamSection}</div> </div> );