@props(['type' => 'info', 'message' => '', 'autohide' => true, 'duration' => 5000])

<div class="toast toast-{{ $type }} max-w-sm w-full bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden transform transition-all duration-300"
     x-data="{ show: true }"
     x-show="show"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 transform translate-x-full"
     x-transition:enter-end="opacity-100 transform translate-x-0"
     x-transition:leave="transition ease-in duration-300"
     x-transition:leave-start="opacity-100 transform translate-x-0"
     x-transition:leave-end="opacity-0 transform translate-x-full"
     x-init="@if($autohide) setTimeout(() => { show = false }, {{ $duration }}) @endif">
    
    <div class="flex items-start p-4">
        <!-- Icono -->
        <div class="flex-shrink-0">
            @switch($type)
                @case('success')
                    <svg class="w-6 h-6 text-green-500" 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>
                    @break
                @case('error')
                    <svg class="w-6 h-6 text-red-500" 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>
                    @break
                @case('warning')
                    <svg class="w-6 h-6 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                    </svg>
                    @break
                @default
                    <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
            @endswitch
        </div>
        
        <!-- Mensaje -->
        <div class="ml-3 flex-1">
            <p class="text-sm font-medium text-gray-900">{{ $message }}</p>
        </div>
        
        <!-- Botón cerrar -->
        <button @click="show = false" class="ml-4 flex-shrink-0 text-gray-400 hover:text-gray-500">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>
    
    <!-- Barra de progreso -->
    @if($autohide)
    <div class="h-1 bg-gray-200">
        <div class="h-full bg-{{ $type }}-500 transition-all duration-{{ $duration }}"
             x-data="{}"
             x-init="setTimeout(() => $el.style.width = '0%', 100)"></div>
    </div>
    @endif
</div>