@props([
    'type' => 'info',         // info | success | warning | danger
    'title' => null,
    'message' => null,
    'dismissible' => true,
    'icon' => null,
])

@php
    $icons = ['info' => 'ti-info-circle', 'success' => 'ti-check', 'warning' => 'ti-alert-triangle', 'danger' => 'ti-alert-octagon'];
    $resolvedIcon = $icon ?? $icons[$type] ?? 'ti-info-circle';
@endphp

<div {{ $attributes->merge(['class' => "alert alert-{$type} ".($dismissible ? 'alert-dismissible' : '')]) }} role="alert">
    <div class="d-flex">
        <div><i class="ti {{ $resolvedIcon }} fs-3 me-2"></i></div>
        <div>
            @if($title)<h4 class="alert-title">{{ $title }}</h4>@endif
            <div class="text-secondary">{{ $message ?? $slot }}</div>
        </div>
    </div>
    @if($dismissible)
        <a class="btn-close" data-bs-dismiss="alert" aria-label="إغلاق"></a>
    @endif
</div>