<template>
    <NotificationGroup group="error">
        <div class="fixed inset-0 flex items-start justify-end p-6 px-4 py-6 pointer-events-none z-50">
            <div class="w-full max-w-sm">
                <Notification
                  v-slot="{ notifications }"
                  enter="transform ease-out duration-300 transition"
                  enter-from="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4"
                  enter-to="translate-y-0 opacity-100 sm:translate-x-0"
                  leave="transition ease-in duration-500"
                  leave-from="opacity-100"
                  leave-to="opacity-0"
                  move="transition duration-500"
                  move-delay="delay-300"
                >
                    <div class="flex w-full max-w-sm mx-auto mt-4 overflow-hidden bg-white rounded-lg shadow-md border border-gray-200"
                      v-for="notification in notifications"
                      :key="notification.id"
                    >
                        <div class="flex items-center justify-center w-12 bg-red-500">
                            <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-white">
                                <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
                                <line x1="15" y1="9" x2="9" y2="15"></line>
                                <line x1="9" y1="9" x2="15" y2="15"></line>
                            </svg>
                        </div>

                        <div class="px-4 py-2 -mx-3">
                            <div class="mx-3">
                                <span class="font-semibold text-red-500">{{ notification.title }}</span>
                                <p class="text-sm text-gray-600">{{ notification.text }}</p>
                            </div>
                        </div>
                    </div>
                </Notification>
            </div>
        </div>
    </NotificationGroup>
</template>

<script>
import { defineComponent } from 'vue'
import Notifications from 'notiwind'

export default defineComponent({
  components: {
    Notifications,
  },
})
</script>
