{{--
  FEEDBACK GROUP
  Các variant: empty-state, alert, toast
  Usage:
    <x-ui.feedback type="empty-state" ... />
    <x-ui.feedback type="alert" ... />
    <x-ui.feedback type="toast" ... />
--}}
@props([
    'type' => 'empty-state', // 'empty-state' | 'alert' | 'toast'

    // empty-state
    'message' => 'Chưa có dữ liệu',
    'icon' => null,
    'action' => null,

    // alert & toast
    'level' => 'info', // info, success, warning, error
    'title' => '',
    'dismissible' => false,

    // toast only
    'id' => null,
])

@php
$toastId = $id ?? 'toast-' . uniqid();
@endphp

@switch($type)

    @case('empty-state')
        <div class="text-center py-8 text-gray-500">
            @if($icon)
                <div class="text-4xl mb-2">{{ $icon }}</div>
            @endif
            <p>{{ $message }}</p>
            @if($action)
                <div class="mt-4">{{ $action }}</div>
            @endif
        </div>
        @break

    @case('alert')
        @php
            $colors = [
                'info' => 'bg-blue-50 border-blue-400 text-blue-800',
                'success' => 'bg-green-50 border-green-400 text-green-800',
                'warning' => 'bg-yellow-50 border-yellow-400 text-yellow-800',
                'error' => 'bg-red-50 border-red-400 text-red-800',
            ][$level] ?? 'bg-blue-50 border-blue-400 text-blue-800';
        @endphp
        <div class="border-l-4 p-4 {{ $colors }} {{ $class ?? '' }}" role="alert">
            @if($title)
                <p class="font-bold">{{ $title }}</p>
            @endif
            <p>{{ $slot }}</p>
            @if($dismissible)
                <button type="button" class="absolute top-0 right-0 p-4" onclick="this.parentElement.remove()">×</button>
            @endif
        </div>
        @break

    @case('toast')
        {{-- Toast notification - hiển thị tạm thời, tự động đóng --}}
        <div id="{{ $toastId }}" class="notification {{ $level }}" role="status">
            <span class="notification-icon"></span>
            <div class="notification-content">
                @if($title)
                    <div class="notification-title">{{ $title }}</div>
                @endif
                @if($message)
                    <div class="notification-message">{{ $message }}</div>
                @else
                    <div class="notification-message">{{ $slot }}</div>
                @endif
            </div>
            <button type="button" class="notification-close" onclick="closeNotification('{{ $toastId }}')">×</button>
        </div>
        @break

@endswitch
