import { IgniteElement } from '../ignite-html/ignite-element.js';
import { h1, div } from '../ignite-html/ignite-template.js';
import { RowAccordian } from './row-accordian.js';

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

    get properties() {
        return {};
    }

    render() {
        return this.template
            .child(
                new div(
                    new RowAccordian()
                        .property("title", "Defining a new component/element")
                        .property("show", true)
                        .child("<h1>This is the content</h1><h2>hopefully a lot of it</h2><h2>this should give an idea</h2>"),
                    new RowAccordian()
                        .property("title", "Defining a new component/element")
                        .child("<h1>This is the content</h1><h2>hopefully a lot of it</h2><h2>this should give an idea</h2>"),
                    new RowAccordian()
                        .property("title", "Defining a new component/element")
                        .child("<h1>This is the content</h1><h2>hopefully a lot of it</h2><h2>this should give an idea</h2>")
                )
                    .style("display", "flex")
                    .style("flex-direction", "column")
                    .style("align-items", "center")
            );
    }
}

customElements.define("main-app", MainApp);