@props([
    'type' => 'success',
    'message' => '',
    'dismissible' => true,
    'duration' => 6000,
])

@php
    $icons = [
        'success' => 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
        'error' => 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z',
        'info' => 'M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z',
    ];
@endphp

@if($message)
<div
    class="eva-toast-stack"
    x-data="{
        show: true,
        init() {
            @if($dismissible && $duration > 0)
            setTimeout(() => { this.show = false }, {{ $duration }});
            @endif
        }
    }"
    x-show="show"
    x-cloak
    x-transition:enter="eva-toast-enter"
    x-transition:enter-start="eva-toast-enter-start"
    x-transition:enter-end="eva-toast-enter-end"
    x-transition:leave="eva-toast-leave"
    x-transition:leave-start="eva-toast-leave-start"
    x-transition:leave-end="eva-toast-leave-end"
    role="status"
    aria-live="polite"
>
    <div @class(['eva-toast', "eva-toast-{$type}"])>
        <svg class="eva-toast-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="{{ $icons[$type] ?? $icons['info'] }}" />
        </svg>
        <p class="eva-toast-message">{{ $message }}</p>
        @if($dismissible)
            <button type="button" class="eva-toast-close" @click="show = false" aria-label="Cerrar notificación">✕</button>
        @endif
    </div>
</div>
@endif