import React, {useState} from "react";
import {Accordion, Button} from "react-bootstrap";

interface HelloWorldProps {
    msg: string,
}

const MyAccordion = <Accordion defaultActiveKey="0">
    <Accordion.Item eventKey="0">
        <Accordion.Header>Accordion Item #1</Accordion.Header>
        <Accordion.Body>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat.
        </Accordion.Body>
    </Accordion.Item>
    <Accordion.Item eventKey="1">
        <Accordion.Header>Accordion Item #2</Accordion.Header>
        <Accordion.Body>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
            laborum.
        </Accordion.Body>
    </Accordion.Item>
</Accordion>;
    
export function HelloWorld({msg}: HelloWorldProps) {
    const [stateVal, setStateVal] = useState(true);
    return <>
        <div className={`message`}>
            <p>Hello World!</p>
            <p>Message: {msg}</p>
            <p>Bootstrap Button:</p>
            <Button variant="primary" className="white-space-pre me-1"  onClick={()=>{setStateVal(!stateVal)}}>Toggle</Button>
            <br/><br/>
            <p>React Hook: `useState`: {stateVal ? 'On' : 'Off'}</p>
        </div>
        <div className="message">
            <p>Use <blockquote>?msg=...</blockquote> to load a message into React engine.</p>
        </div>
        <div className="mx-auto"  style={{maxWidth: '50rem'}}>
            {MyAccordion}
        </div>
    </>
}

