<template>
  <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1100;">
    <div 
      v-for="toast in toasts" 
      :key="toast.id"
      class="toast show"
      role="alert"
    >
      <div class="toast-header" :class="headerClass(toast.type)">
        <i :class="iconClass(toast.type)" class="me-2"></i>
        <strong class="me-auto">{{ toast.title }}</strong>
        <button type="button" class="btn-close btn-close-white" @click="remove(toast.id)"></button>
      </div>
      <div class="toast-body">
        {{ toast.message }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { toasts, remove } = useToast()

function headerClass(type: string) {
  const classes: Record<string, string> = {
    success: 'bg-success text-white',
    error: 'bg-danger text-white',
    warning: 'bg-warning text-dark',
    info: 'bg-primary text-white'
  }
  return classes[type] || classes.info
}

function iconClass(type: string) {
  const icons: Record<string, string> = {
    success: 'bi bi-check-circle-fill',
    error: 'bi bi-x-circle-fill',
    warning: 'bi bi-exclamation-triangle-fill',
    info: 'bi bi-info-circle-fill'
  }
  return icons[type] || icons.info
}
</script>

<style scoped>
.toast {
  min-width: 300px;
}
</style>
