<script setup>
import { ref, watch } from 'vue'
import { usePage } from '@inertiajs/vue3'

const page = usePage()
const visible = ref(false)
const type = ref('success')
const message = ref('')

watch(() => page.props.flash, (flash) => {
    if (flash?.success) {
        type.value = 'success'
        message.value = flash.success
        visible.value = true
        setTimeout(() => visible.value = false, 4000)
    } else if (flash?.error) {
        type.value = 'error'
        message.value = flash.error
        visible.value = true
        setTimeout(() => visible.value = false, 6000)
    }
}, { immediate: true, deep: true })
</script>

<template>
    <Transition enter-from-class="opacity-0 -translate-y-2" enter-active-class="transition-all duration-300"
        leave-to-class="opacity-0 -translate-y-2" leave-active-class="transition-all duration-200">
        <div v-if="visible"
            :class="['mx-6 mt-4 flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium shadow-sm',
                type === 'success' ? 'bg-green-50 text-green-800 border border-green-200' : 'bg-red-50 text-red-800 border border-red-200']">
            <svg v-if="type === 'success'" class="h-5 w-5 flex-shrink-0 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                    clip-rule="evenodd" />
            </svg>
            <svg v-else class="h-5 w-5 flex-shrink-0 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                    clip-rule="evenodd" />
            </svg>
            <span class="flex-1">{{ message }}</span>
            <button @click="visible = false" class="flex-shrink-0 opacity-60 hover:opacity-100">
                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd"
                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                        clip-rule="evenodd" />
                </svg>
            </button>
        </div>
    </Transition>
</template>
