<template>
  <div :class="`${$classPrefix}-collapse-item`">
    <div :class="`${$classPrefix}-collapse-item__header`" @click="toggleHeader">
      <irbis-button subtle :class="[
        `${$classPrefix}-alert__close`,

      ]">
        <!-- TODO: Single item active at a time -->
        <irbis-icon v-if="isActive" name="chevron-down" />
        <irbis-icon v-else name="chevron-right" />
      </irbis-button>
      <span :class="`${$classPrefix}-collapse-item__title`">
        <slot name="title" />
      </span>
    </div>
    <div :class="[
      `${$classPrefix}-collapse-item__body`,
      {'active': isActive}
    ]">
      <slot name="body" />
    </div>
  </div>
</template>

<script>
export default {
  name: "IrbisCollapseItem",

  props: {
    active: {
      default: false,
      type: Boolean
    }
  },

  data() {
    return {
      isActive: this.active
    };
  },

  methods: {
    toggleHeader() {
      this.isActive = !this.isActive;
    }
    // this.$parent...
  }
};
</script>
