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

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

<div {{ $attributes->merge(['class' => 'toast toast--' . $tone, 'role' => 'status', 'aria-live' => 'polite']) }}>
    <span class="toast__icon">{!! icon($useIcon) !!}</span>
    <div class="toast__body">
        @if($title)<div class="toast__title">{{ $title }}</div>@endif
        <div class="toast__message">{{ $slot }}</div>
    </div>
    @if($dismissible)
        <button type="button" class="toast__close" data-toast-dismiss aria-label="Dismiss">
            {!! icon('x') !!}
        </button>
    @endif
</div>