// eslint-disable-next-line
const preact = require('preact');

function ItemList({ items, setActiveItem }) {
    if (!items) return <div>...</div>;
    const itemPanels = items.map(item => (

        <div key={item.id} className="tile is-parent is-vertical box">
            <div className="tile is-vertical is-child">
                <div className="columns" >
                    <div className="column is-8">
                        <p className="title">{item.action}</p>
                        <p className="subtitle">∞</p>
                    </div>
                    <div className="column">
                        <figure className="image">
                            <svg width="40" height="40" data-jdenticon-value={item.action} />
                        </figure>
                    </div>
                </div>
            </div>
            <button
                className="button is-dark"
                type="submit"
                onClick={() => setActiveItem(item.id)}>
                Use
            </button>
        </div>
    ));
    return (
        <div>
            {itemPanels}
        </div>
    );
}

module.exports = ItemList;