{{--
|--------------------------------------------------------------------------
| Individual Toast Item Component
|--------------------------------------------------------------------------
|
| Reusable component for individual toast notifications.
| 
| Parameters:
| - type: success, error, warning, info
| - message: The message to display
| - icon: FontAwesome icon name (without 'fa-' prefix)
|
|--------------------------------------------------------------------------
--}}

<div class="toast-notification toast-{{ $type }}" 
     role="alert" 
     aria-live="polite" 
     aria-atomic="true"
     data-toast-type="{{ $type }}">
    
    <div class="toast-content">
        {{-- Icon --}}
        <i class="fas fa-{{ $icon }} toast-icon" aria-hidden="true"></i>
        
        {{-- Message --}}
        <span class="toast-message">{{ $message }}</span>
        
        {{-- Close Button --}}
        <button type="button" 
                class="toast-close" 
                aria-label="Close notification"
                title="Close notification">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
</div>