@props([
    'tone' => 'info',
    'title' => null,
    'icon' => null,
    'dismissible' => false,
])

@php
    $iconDefault = match($tone) {
        'success' => 'check-circle',
        'warning' => 'exclamation-triangle',
        'danger'  => 'x-octagon',
        'info'    => 'info-circle',
        default   => 'bell',
    };
    $useIcon = $icon ?? $iconDefault;
    $classes = 'alert alert-' . $tone . ($dismissible ? ' alert-dismissible fade show' : '');
@endphp

<div {{ $attributes->merge(['class' => $classes, 'role' => 'alert']) }}>
    <div class="alert__icon">{!! icon($useIcon) !!}</div>
    <div class="alert__body">
        @if($title)<div class="alert__title">{{ $title }}</div>@endif
        <div class="alert__message">{{ $slot }}</div>
    </div>
    @if($dismissible)
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    @endif
</div>