@props(['type' => 'info', 'message'])

@php
    $toastData = [
        'info' => [
            'icon' => 'bx bx-info-circle',
            'title' => 'Notice',
        ],
        'success' => [
            'icon' => 'bx bx-check-circle',
            'title' => 'Success',
        ],
        'warning' => [
            'icon' => 'bx bx-error-circle',
            'title' => 'Warning',
        ],
        'danger' => [
            'icon' => 'bx bx-x-circle',
            'title' => 'Error',
        ],
    ][$type] ?? [
        'icon' => 'bx bx-info-circle',
        'title' => 'Info!',
    ];
@endphp

<div x-data="{ show: true }" x-init="setTimeout(() => show = false, 3000)" x-show="show" 
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 transform -translate-y-4 md:translate-y-0 md:translate-x-4"
    x-transition:enter-end="opacity-100 transform translate-y-0 md:translate-x-0" 
    x-transition:leave="transition ease-in duration-300"
    x-transition:leave-start="opacity-100 transform translate-y-0 md:translate-x-0"
    x-transition:leave-end="opacity-0 transform -translate-y-4 md:translate-y-0 md:translate-x-4"
    id="{{ uniqid('toast-') }}" class="toast toast-{{ $type }}" 
    role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-inner">
        <div class="toast-icon">
            <i class="{{ $toastData['icon'] }}"></i>
        </div>
        <div class="toast-content">
            <h4>{{ $toastData['title'] }}</h4>
            @if (!empty($message))
                <p>{{ $message }}</p>
            @endif
        </div>
    </div>
    <button @click="show = false" class="toast-close" aria-label="Close">
        <i class="bx bx-x"></i>
    </button>
</div>