import React from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";


export default function HelpCom(){

    return(
        <>
            <BreadcrumbComBS title='Frequesntly Asked Questions' paths={['Dashboard', 'Help']} />
            {/*<div className="row">*/}
            {/*    <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
            {/*</div>*/}


            <div className="row account-contant">
                <div className="col-12">
                    <div className="card card-statistics">
                        <div className="card-body p-lg-15" style={{backgroundColor:"#f9f9fb"}}>
                            
                                <p className="mb-4">First, a disclaimer – the entire process of writing a blog post often takes more than a couple of hours, even if you can type eighty words as per minute and your writing skills are sharp.</p>
                            <div className="row">
                                <div className="accordion" id="accordionExample">
                                    {['a', 'b', 'c', 'd'].map((item, index)=>{
                                        return (
                                            <div className="accordion-item">
                                                <h2 className="accordion-header">
                                                <button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target={`#${item}`} aria-expanded="true" aria-controls="collapseOne">
                                                    {`Accordion Item ${item} 1`}
                                                </button>
                                                </h2>
                                                <div id={item} className={`accordion-collapse collapse ${index == 0 && 'show'}`} data-bs-parent="#accordionExample">
                                                <div className="accordion-body">
                                                    <strong>This is the first item’s accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the accordion-body, though the transition does limit overflow.
                                                </div>
                                                </div>
                                            </div>
                                        )
                                    })}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </>
    )
}