import { Accordian } from "accordianjs"

    const accordianHeaderComponent = () => {
            return (
                
                <div  >
                    <p>I am CUSTOM Header.</p>
                </div>
                
            )
        }

    const accordianBodyComponent = () => {
        return (
            <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }} >
                <p>Hello World!</p>
            </div>
        )
    }


    < Accordian
        accordianStatus={true}  
        accordianHeaderText={"Header Text."} // accordianHeaderText OR accordianHeaderComponent
        accordianHeaderHeight={"50"} //Data Type String
        accordianBodyHeight={"100"} //Data Type String
        accordianBorderRadius={"5"} //Data Type String
        openingAanimationDuration={"0.5"} //Data Type String
        closingAanimationDuration={"0.5"} //Data Type String
        accordianBorderColour={"#ffc400"} //Data Type String
        accordianBodyBackgroundColor={"#2196f3"} //Data Type String
        accordianHeaderBackgroundColor={"#f8bbd0"} //Data Type String
        accordianHoverHeaderBackgroundColor={"#ff80ab"} //Data Type String
        accordianHeaderComponent={accordianHeaderComponent} // accordianHeaderText OR accordianHeaderComponent
        accordianBodyComponent={accordianBodyComponent}
    />