<template>
  <modal-template
    :id="id"
    size="md"
    is-header-show
    :body-class="['p-0']"
    :header-class="['border-0']"
    :no-close-on-backdrop="false"
  >
    <template v-slot:body>
      <notification-center
        id="notification-center"
        ref="modalNotificationCenter"
        data-qa-prefix="notificationCenterModal"
      />
    </template>

    <template v-slot:footer="{ closeModal }">
      <b-button @click="closeModal" variant="primary" data-qa="notificationCenterModal-close-btn">
        {{ $t('Common.Close') }}
      </b-button>
    </template>
  </modal-template>
</template>

<script>
import ModalTemplate from '@/elements/common/components/modalTemplate'
import NotificationCenter from '@/app/_global/components/elements/NotificationCenter'
export default {
  name: 'NotificationCenterModal',
  components: { ModalTemplate, NotificationCenter },
  props: {
    id: { type: String, default: 'notification_center_modal' },
  },
  methods: {
    show() {
      this.$bvModal.show(this.id)
    },
  },
}
</script>
