import React, { useState } from 'react';
//import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap CSS
//import 'bootstrap-icons/font/bootstrap-icons.css'; // Import Bootstrap Icons

const Content = () => {
    // State to track which benefits and FAQs are open
    const [openedBenefit, setOpenedBenefit] = useState("collapseBenfitOne"); // Open first benefit by default
    const [openedFaq, setOpenedFaq] = useState("collapseFaqOne"); // Open first FAQ by default

    return (
        <div>
            {/* Benefits Accordion */}
            <div id="benefitAccordion" className="accordion">

                {/* Benefits #1 */}
                <div className="accordion-item">
                    <h2 id="headingBenfitOne" className="accordion-header">
                        <button
                            className="accordion-button fw-bold"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#collapseBenfitOne"
                            aria-expanded={openedBenefit === "collapseBenfitOne"}
                            aria-controls="collapseBenfitOne"
                            onClick={() => setOpenedBenefit(openedBenefit === "collapseBenfitOne" ? "" : "collapseBenfitOne")} // Toggle item
                        >
                            <span className="underlay"></span>
                            Title Here
                            <i className={`bi ${openedBenefit === "collapseBenfitOne" ? "bi-box-arrow-in-up" : "bi-box-arrow-down"} fw-bold ms-auto`} style={{ fontSize: "1.4rem" }}></i>
                        </button>
                    </h2>
                    <div id="collapseBenfitOne" className={`accordion-collapse collapse ${openedBenefit === "collapseBenfitOne" ? "show" : ""}`} aria-labelledby="headingBenfitOne" data-bs-parent="#benefitAccordion">
                        <div className="accordion-body">
                            Content Here
                        </div>
                    </div>
                </div>

                {/* Benefits #2 */}
                <div className="accordion-item">
                    <h2 id="headingBenfitTwo" className="accordion-header">
                        <button
                            className="accordion-button collapsed fw-bold"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#collapseBenfitTwo"
                            aria-expanded={openedBenefit === "collapseBenfitTwo"}
                            aria-controls="collapseBenfitTwo"
                            onClick={() => setOpenedBenefit(openedBenefit === "collapseBenfitTwo" ? "" : "collapseBenfitTwo")} // Toggle item
                        >
                            <span className="underlay"></span>
                            Title Here
                            <i className={`bi ${openedBenefit === "collapseBenfitTwo" ? "bi-box-arrow-in-up" : "bi-box-arrow-down"} fw-bold ms-auto`} style={{ fontSize: "1.4rem" }}></i>
                        </button>
                    </h2>
                    <div id="collapseBenfitTwo" className={`accordion-collapse collapse ${openedBenefit === "collapseBenfitTwo" ? "show" : ""}`} aria-labelledby="headingBenfitTwo" data-bs-parent="#benefitAccordion">
                        <div className="accordion-body">
                            Content Here
                        </div>
                    </div>
                </div>
            </div>

            {/* FAQ Accordion */}
            <div id="faqAccordion" className="accordion">

                {/* Question 1 */}
                <div className="accordion-item">
                    <h2 id="headingFaqOne" className="accordion-header">
                        <button
                            className="accordion-button fw-bold"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#collapseFaqOne"
                            aria-expanded={openedFaq === "collapseFaqOne"}
                            aria-controls="collapseFaqOne"
                            onClick={() => setOpenedFaq(openedFaq === "collapseFaqOne" ? "" : "collapseFaqOne")} // Toggle item
                        >
                            <span className="underlay"></span>
                            Title Here
                            <i className={`bi ${openedFaq === "collapseFaqOne" ? "bi-box-arrow-in-up" : "bi-box-arrow-down"} fw-bold ms-auto`} style={{ fontSize: "1.4rem" }}></i>
                        </button>
                    </h2>
                    <div id="collapseFaqOne" className={`accordion-collapse collapse ${openedFaq === "collapseFaqOne" ? "show" : ""}`} aria-labelledby="headingFaqOne">
                        <div className="accordion-body">
                            Content Here
                        </div>
                    </div>
                </div>

                {/* Question 2 */}
                <div className="accordion-item">
                    <h2 id="headingFaqTwo" className="accordion-header">
                        <button
                            className="accordion-button collapsed fw-bold"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#collapseFaqTwo"
                            aria-expanded={openedFaq === "collapseFaqTwo"}
                            aria-controls="collapseFaqTwo"
                            onClick={() => setOpenedFaq(openedFaq === "collapseFaqTwo" ? "" : "collapseFaqTwo")} // Toggle item
                        >
                            <span className="underlay"></span>
                            Title Here
                            <i className={`bi ${openedFaq === "collapseFaqTwo" ? "bi-box-arrow-in-up" : "bi-box-arrow-down"} fw-bold ms-auto`} style={{ fontSize: "1.4rem" }}></i>
                        </button>
                    </h2>
                    <div id="collapseFaqTwo" className={`accordion-collapse collapse ${openedFaq === "collapseFaqTwo" ? "show" : ""}`} aria-labelledby="headingFaqTwo">
                        <div className="accordion-body">
                            Content Here
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Content;

trying to get the smooth opening effect to work again with bootstrap 5.3 accordion, when adding other features it accordion-item no longer smoothly open.