<template>
  <div
    v-if="toastStore.toastModal"
    :class="['bs-toast toast toast-placement-ex m-2 fade show', toastClass]"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
  >
    <div class="toast-header">
      <i class="bx bx-bell me-2"></i>
      <div class="me-auto fw-semibold">알림</div>
      <button
        type="button"
        class="btn-close"
        aria-label="Close"
        @click="offToast"
      ></button>
    </div>
    <div class="toast-body">
      {{ toastStore.toastMsg }}
    </div>
  </div>
</template>

<script setup>
import { useToastStore } from '@s/toastStore';
import { computed } from 'vue';
const toastStore = useToastStore();

const offToast = () => {
  toastStore.offToast();  // 상태 변경으로 토스트 숨기기
};

const toastClass = computed(() => {
  return toastStore.toastType === 'e' ? 'bg-danger' : 'bg-success'; // 에러일 경우 red, 정상일 경우 blue
});
</script>
