<template>
  <b-alert :show="isDisplay" :variant="variant">
    <span class="font-size-5 font-weight-bold" v-if="title">{{ title }}</span>

    <div>
      <!--    items props enable user component to use the value from inner component-->
      <slot name="body" :items="items">
        <ul v-if="items.length > 0" class="my-2">
          <li v-for="(item, index) in items" :key="index">
            <span>{{ item }}</span>
          </li>
        </ul>
      </slot>
    </div>
  </b-alert>
</template>

<script>
export default {
  name: 'CustomAlert',
  props: {
    isDisplay: { type: Boolean, required: true },
    variant: { type: String, default: 'primary' },
    title: { type: String },
    items: { type: Array, default: () => [] },
  },
}
</script>
