@props(['message' => '', 'type' => 'success', 'duration' => 3000])

@if($message)
<div x-data="{
    show: true,
    init() {
        setTimeout(() => { this.show = false; }, {{ $duration }});
    }
}"
     x-show="show"
     x-cloak
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 translate-x-8"
     x-transition:enter-end="opacity-100 translate-x-0"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100 translate-x-0"
     x-transition:leave-end="opacity-0 translate-x-8"
     class="w-full">
    <div class="{{ $type === 'error' ? 'bg-red-600 text-white' : 'bg-emerald-600 text-white' }} px-4 py-3 rounded-xl shadow-lg flex items-center gap-3">
        @if($type === 'success')
            <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        @else
            <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        @endif
        <p class="text-sm font-medium">{{ $message }}</p>
    </div>
</div>
@endif