{{--
  Alert Modal - Modal thông báo (không cần xác nhận)
  Usage:
    <x-modals.alert-modal
        id="successModal"
        title="Thành công"
        message="Dữ liệu đã được lưu thành công."
        level="success"
    />

    Hoặc với custom content:
    <x-modals.alert-modal
        id="errorModal"
        title="Lỗi"
        level="error"
    >
        <ul class="list-disc pl-4">
            <li>Lỗi 1</li>
            <li>Lỗi 2</li>
        </ul>
    </x-modals.alert-modal>
--}}
@props([
    'id' => 'alertModal',
    'title' => 'Thông báo',
    'message' => '',
    'level' => 'info', // info, success, warning, error
    'confirmLabel' => 'Đóng',
])

@php
$iconClass = match($level) {
    'success' => 'modal-icon success',
    'warning' => 'modal-icon warning',
    'error' => 'modal-icon error',
    default => 'modal-icon info',
};

$iconSymbol = match($level) {
    'success' => '✓',
    'warning' => '⚠',
    'error' => '✕',
    default => 'ℹ',
};
@endphp

<div id="{{ $id }}" class="modal-overlay" data-modal style="display:none;">
    <div class="modal compact">
        <div class="modal-header with-icon">
            <h3>
                <span class="{{ $iconClass }}">{{ $iconSymbol }}</span>
                {{ $title }}
            </h3>
            <button type="button" class="modal-close" data-close aria-label="Đóng">×</button>
        </div>
        <div class="modal-body">
            @if($message)
                <p class="text-gray-600">{{ $message }}</p>
            @else
                {{ $slot }}
            @endif
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-close>{{ $confirmLabel }}</button>
        </div>
    </div>
</div>
