import {useEffect, useState} from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import styles from './App.module.scss';
import Item from './Item.jsx';
import AppInfoCtx from "./AppInfoCtx.js";

function App() {
    const [count, setCount] = useState(0);
    const [notification, setNotification] = useState("");

    useEffect(() => {
        console.log("Executed on mount")
        return () => {
            console.log('Executed on unmount');
        }
    }, []);

    let items = [];
    for (let i = 0; i < count; i++) {
        items.push(
            <Item key={i} pos={i} callback={setNotification}/>
        );
    }

    return (
        <>
            <h3>{notification}</h3>
            <div>
                <a href="https://vite.dev" target="_blank">
                    <img src={viteLogo} className="logo" alt="Vite logo"/>
                </a>
                <a href="https://react.dev" target="_blank">
                    <img src={reactLogo} className="logo react" alt="React logo"/>
                </a>
            </div>
            <h1>Vite + React</h1>
            <div className="card">
                <AppInfoCtx.Provider value="app-info-1">
                    <ul>
                        {items}
                    </ul>
                </AppInfoCtx.Provider>

                <AppInfoCtx.Provider value="app-info-2">
                    <ul>
                        {items}
                    </ul>
                </AppInfoCtx.Provider>
                <button className={styles.item} onClick={() => setCount((count) => count + 1)}>
                    count is {count}
                </button>
                <p>
                    Edit <code>src/App.jsx</code> and save to test HMR
                </p>
            </div>
            <p className="read-the-docs">
                Click on the Vite and React logos to learn more
            </p>
        </>
    )
}

export default App