class ActionEntry extends HTMLElement{
    constructor(title, actionCallback){
        super();
        this.title = title;
        this.actionCallback = actionCallback;
    }

    performActionCallback(){
        this.actionCallback()
    }

    connectedCallback(){
        this.render();
        this.getElementsByTagName("img")[0].onclick = () => {this.performActionCallback();};
    }

    render(){
        this.innerHTML = `
        <link rel="stylesheet" href="components/action_entry/action_entry.css">
        <div class="action-entry">
            <span class="action-entry-title">${this.title}</span>
            <img src="res/arrow.png" class="action-entry-arrow">     
        </div>
        `;
    }
}

customElements.define("sea-action-entry", ActionEntry);