@props([
    'tone'  => 'info',   // info | success | warning | danger
    'title' => null,
    'icon'  => null,
])

@php
    $iconName = $icon ?? match ($tone) {
        'success' => 'check',
        'danger'  => 'alert',
        'warning' => 'alert',
        default   => 'alert',
    };
@endphp

<div {{ $attributes->merge(['class' => 'dc-alert dc-alert--'.$tone]) }}
     role="{{ in_array($tone, ['warning','danger'], true) ? 'alert' : 'status' }}">
    <div class="dc-alert__icon"><x-icon :name="$iconName" size="18" /></div>
    <div>
        @if ($title) <strong class="d-block">{{ $title }}</strong> @endif
        <div>{{ $slot }}</div>
    </div>
</div>