const preact = require('preact');

function CrypCard(cryp) {
    return (
        <div key={cryp.id}
            className="tile is-vertical box"
            style={activeItem ? { cursor: 'pointer' } : {}}
            onClick={() => sendItemUse(cryp.id)} >
            <div className="tile is-child">
                <div className="columns" >
                    <div className="column is-10">
                        <p className="title">{cryp.name}</p>
                        <p className="subtitle">Level {cryp.lvl}</p>
                    </div>
                    <div className="column">
                        <figure className="image">
                            <svg width="40" height="40" data-jdenticon-value={cryp.name} />
                        </figure>
                    </div>

                </div>
                <div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
                <progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>

                <div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div>
                <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>

            </div>
            <button
                className="button is-dark"
                type="submit"
                disabled={cryp.hp.value === 0}
                onClick={() => sendGamePve(cryp.id)}>
                Start PVE
            </button>
        </div>
    );
}

module.exports = CrypCard;