const preact = require('preact');

const { stringSort } = require('./../utils');

const idSort = stringSort('id');

function CrypList({ cryps, activeCryp, avatar }) {
    if (!cryps) return <div>not ready</div>;

    const crypPanels = cryps.sort(idSort).map(cryp => (
        <div key={cryp.id} className="home-cryp">
            <h2>{cryp.name}</h2>
            <div>{cryp.hp.value} HP</div>
            <button
                type="submit"
                disabled={cryp.hp.value === 0}
                onClick={() => activeCryp(cryp.id)}>
                activate
            </button>
        </div>
    ));
    return (
        <div>
            {crypPanels}
        </div>
    );
}

module.exports = CrypList;