import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from 'react';

//Spoiler
const Spoiler = ({ header = "+", open, children }) => {
    const [isOpen, setIsOpen] = useState(open)
    console.log(open)
    return (
        <div>
            <h2>Spoiler</h2>
            <div onClick={() => setIsOpen(!isOpen)}>
                {header}
                {isOpen && children}
            </div>
        </div>
    )
}

function App() {
    return (
        <div className="App">
            <header>
                {/* Spoiler */}
                <Spoiler header={<h1>Заголовок</h1>} open>
                    Контент 1
                    <p>
                        лорем ипсум траливали и тп.
                    </p>
                </Spoiler>
                <Spoiler>
                    <h2>Контент 2</h2>
                    <p>
                        лорем ипсум траливали и тп.
                    </p>
                </Spoiler>
            </header>
        </div>
    );
}

export default App;