const button = new Component({
    tag: "button",
    innerHTML: "Click Me",
    styles: {
        minWidth: "fit-content",
        minHeight: "fit-content",
        padding: "10px",
        outline: "none",
        border: "none",
        borderRadius: "4px",
        backgroundColor: "#2195F1",
        color: "white",
        fontWeight: "700",
        cursor: "pointer"
    },
})


document.body.append(button.DOM);

const button = new Component({
    tag: "button",
    innerHTML: "Make me Red",
    styles: {
        ...
        $hover: {
            backgroundColor: "#FE0000",
        },
        $focus: {
            backgroundColor: "#FE0000"
        }
    },
})

const button = new Component({
    tag: "button",
    innerHTML: "Make me Red",
    styles: {
        ...
        $hover$focus: {
            backgroundColor: "#FE0000",
        }
    }
})

new Component({
    ...
    id: "my_own_id"
    ...
})

new Component({
    ...
    randomId: false
    ...
})

new Component({
    ...
    className: "btn btn-primary m-5"
    ...
})

new Component({
    ...

    styles: {
        // Normal Styles Goes Here
        $hover: {
            // All styles in here will apply when in hovering state
        },
        $focus: {
            // All Styles in here will apply when element is focused
        },
        $hover$focus: {
            // All styles in here will Apply At Both Hovering and Focused State
        }
    }

    ...
})

new Component({
    ...
    styles: {
        ...
        $media: {
            '(max-width: 767px)': {
                // All Styles in here will be applyed when the query matches

                // And styles in here will be removed when media query changes to false
            }
        }
        ...
    },
    ...
})

new Component({
    ...
    attributes: [
        {
            name: "src",
            value: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
        }
    ]
    ...
})

new Component({
    ...
    events: [
        {
            event: "click",
            callback: (e)=>{
                console.log("I was Clicked");
            }
        }
    ]
    ...
})

    new Component({
        ...

        childrens: [
            {
                tag: "button",
                innerHTML: "Hello I'm Children Element",
                styles: {
                    ...
                }
            }
        ]
        ...
    })

    let button = new Component({
        ...
        tag: "button",
        innerHTML: "Hello I'm Children Element",
        styles: {
            ...
        }
        ...
    })

    new Component({
        ...
        childrens: [
            button
        ]
        ...
    })

    new Component({
        ...
        tag: "button",
        innerHTML: "Hello I'm Children Element",
        styles: {
            ...
        }
        embeddable: false
        ...
    })

let button = new Component({
    ...
})

button.Emitter.on("message", (msg)=>{
    console.log(msg) // It Will Print "Hello World" after 3 seconds
})

setTimeout(()=>{
    button.Emitter.emit("Hello World")
}, 3000)