<script setup>
import { computed } from 'vue';
import { usePage } from '@inertiajs/vue3';

const page = usePage();

const items = computed(() => {
    const flash = page.props.flash || {};

    return [
        flash.success ? { type: 'success', message: flash.success } : null,
        flash.error ? { type: 'error', message: flash.error } : null,
        flash.warning ? { type: 'warning', message: flash.warning } : null,
    ].filter(Boolean);
});

const toneClass = (type) => {
    if (type === 'success') return 'border-emerald-300 bg-emerald-50 text-emerald-900 ring-emerald-200';
    if (type === 'error') return 'border-rose-500 bg-rose-50 text-rose-900 ring-rose-300';
    return 'border-amber-300 bg-amber-50 text-amber-900 ring-amber-200';
};

const iconFor = (type) => {
    if (type === 'success') return '✓';
    if (type === 'error') return '⚠';
    return '!';
};
</script>

<template>
    <div class="fixed right-4 top-4 z-[70] space-y-2">
        <div
            v-for="(item, index) in items"
            :key="`${item.type}-${index}`"
            class="max-w-sm rounded-xl border px-3 py-2.5 text-sm shadow-md ring-1"
            :class="toneClass(item.type)"
        >
            <div class="flex items-start gap-2">
                <span class="mt-[1px] text-base leading-none">{{ iconFor(item.type) }}</span>
                <span class="font-medium">{{ item.message }}</span>
            </div>
        </div>
    </div>
</template>
