<template>
  <div 
    v-if="toastStore.toastModal" 
    :class="['bs-toast toast 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>

<style scoped>
.bs-toast {
  position: fixed;
  bottom: 20px; /* 화면 하단에 위치 */
  right: 20px; /* 오른쪽에 위치 */
  z-index: 2000; /* 충분히 높은 값으로 설정 */
  max-width: 300px; /* 최대 너비 제한 */
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
}

.bg-primary {
  background-color: #007bff !important; /* 성공 색상 */
}

.bg-danger {
  background-color: #ff3e1d !important; /* 에러 색상 */
}
</style>
