<template>
  <div class="toast-container fixed top-4 right-4 z-50 space-y-2 pointer-events-none">
    <TransitionGroup name="toast">
      <div
        v-for="toast in toasts"
        :key="toast.id"
        class="toast-item"
        :class="[
          'transform transition-all duration-300 ease-in-out',
          toast.visible ? 'translate-x-0 opacity-100 pointer-events-auto' : 'translate-x-full opacity-0 pointer-events-none'
        ]"
      >
        <div
          class="alert shadow-lg max-w-sm"
          :class="getToastClasses(toast.type)"
        >
          <div class="flex items-center gap-2">
            <!-- Icon -->
            <div class="flex-shrink-0">
              <IconLucideCheck
                v-if="toast.type === 'success'"
                class="w-5 h-5"
                aria-hidden="true"
              />
              <IconLucideX
                v-else-if="toast.type === 'error'"
                class="w-5 h-5"
                aria-hidden="true"
              />
              <IconLucideAlertTriangle
                v-else-if="toast.type === 'warning'"
                class="w-5 h-5"
                aria-hidden="true"
              />
              <IconLucideInfo
                v-else
                class="w-5 h-5"
                aria-hidden="true"
              />
            </div>

            <!-- Message -->
            <div class="flex-1">
              <span class="text-sm font-medium">{{ toast.message }}</span>
            </div>

            <!-- Close button -->
            <button
              class="btn btn-ghost btn-xs"
              @click="removeToast(toast.id)"
            >
              <IconLucideX class="w-4 h-4" aria-hidden="true" />
            </button>
          </div>
        </div>
      </div>
    </TransitionGroup>
  </div>
</template>

<script setup>
import { useToast } from '~/composables/useToast'
import IconLucideCheck from '~icons/lucide/check'
import IconLucideX from '~icons/lucide/x'
import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'
import IconLucideInfo from '~icons/lucide/info'

const { toasts, removeToast } = useToast()

const getToastClasses = (type) => {
  switch (type) {
    case 'success':
      return 'alert-success'
    case 'error':
      return 'alert-error'
    case 'warning':
      return 'alert-warning'
    case 'info':
      return 'alert-info'
    default:
      return 'alert-info'
  }
}
</script>

<style scoped>
.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease;
}

.toast-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.toast-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.toast-move {
  transition: transform 0.3s ease;
}
</style>
