<template>
  <div class="custom-collapse">
    <b-button
      v-b-toggle="id"
      variant="collapse"
      class="d-flex flex-nowrap justify-content-start"
    >
      <slot name="image"></slot>
      {{ title }}
      <component :is="iconChevronUp" class="icon-expand" />
    </b-button>
    <b-collapse :id="id" class="nav-item__nav">
      <slot></slot>
    </b-collapse>
  </div>
</template>
<script>
import iconChevronUp from '@carbon/icons-vue/es/chevron--up/20';

export default {
  name: 'Collapse',
  props: {
    id: {
      type: String,
      default: null,
    },
    title: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      iconChevronUp: iconChevronUp,
    };
  },
};
</script>
