import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, slot, button } from "../ignite-html/ignite-template.js";

class Chip extends IgniteElement {
    constructor() {
        super();
    }

    get properties() {
        return {
            onDelete: () => { }
        }
    }

    get styles() {
        return `
            mt-chip {
                border-radius: 1em;
                background-color: #e0e0e0;
                padding-top: 0.3em;
                padding-bottom: 0.3em;
                padding-left: 0.6em;
                padding-right: 0.6em;
            }
        `;
    }

    render() {
        return this.template.child(
            new slot(this),
            new button()
                .class("btn ml-1 p-0")
                .child(`<i class="fad fa-times-circle"></i>`)
                .onClick(() => this.onDelete())
        );
    }
}

class ChipTemplate extends IgniteTemplate {
    constructor(...children) {
        super("mt-chip", children);
    }
}

customElements.define("mt-chip", Chip);

export {
    ChipTemplate as Chip
}