import "bulma";
import {useContext, useState} from "react";
import styles from './Item.module.css';
import AppInfoCtx from "./AppInfoCtx.js";

export default function Item({pos, callback}) {
    let [loading, setLoading] = useState(false);
    const appInfo = useContext(AppInfoCtx);
    return (<li className={'my-4 ' + styles.item}>
        <div>
            <div style={{"display": "inline-block"}} className="box m-4"><span>Item {pos}</span></div>
            <button className={"button is-success m-4" + (loading ? " is-loading" : "")} onClick={() => {
                setLoading(true);
                setTimeout(() => {
                    callback('Clicked ' + pos);
                    setLoading(false);
                }, 1000)
            }}>Click me test 1 + 2 + 3
            </button>
            <button className="delete"/>
            <span>App info: {appInfo}</span>
        </div>
    </li>);
}