<template>
<component :is="tag" :class="[itemClass, active ? activeClass : '']">
    <slot name="before-button" :toggle="toggle" :active="active"></slot>
    <slot name="button" :toggle="toggle" :active="active">
        <component :is="buttonTag" :class="buttonClass" @click="toggle()">
            <span class="icon" v-if="labelIcon">
                <i :class="labelIcon"></i>
            </span>
            <span>{{ label }}</span>
            <span class="icon">
                <i v-if="!active" :class="buttonIcon"></i>
                <i v-if="active" :class="buttonIconClose"></i>
            </span>
        </component>
    </slot>
    <div :class="contentClass" v-show="active">
        <slot></slot>
    </div>
</component>
</template>
<script>
export default {
    data() {
        return {
            active: this.open,
        }
    },

    props: {
        tag: {type: String, default: "div"},
        label: {type: String, default: ""},
        labelIcon: {type: String, default: ""},
        buttonTag: {type: String, default: "button"},
        activeClass: {type: String, default: "is-active"},
        buttonClass: {type: String, default: "button"},
        buttonIcon: { type: String, default:"fa fa-angle-down"},
        buttonIconClose: { type: String, default:"fa fa-angle-up"},
        contentClass: String,
        open: {type: Boolean, default: false},
        noButton: {type: Boolean, default: false},
    },

    methods: {
        toggle() {
            this.active = !this.active
        }
    },
}
</script>
