@props([
    'variant' => 'info',
    'title' => null,
    'dismissAfter' => null,
])

@php
    $icon = match ($variant) {
        'success' => '<circle cx="8" cy="8" r="6"/><path d="M5 8l2.5 2.5L11 6"/>',
        'warning' => '<path d="M8 2L2 13h12L8 2z"/><path d="M8 6v3"/><circle cx="8" cy="11" r=".5" fill="currentColor" stroke="none"/>',
        'danger' => '<circle cx="8" cy="8" r="6"/><path d="M6 6l4 4M10 6l-4 4"/>',
        default => '<circle cx="8" cy="8" r="6"/><path d="M8 7v4"/><circle cx="8" cy="5" r=".5" fill="currentColor" stroke="none"/>',
    };
@endphp

<div
    {{ $attributes->merge(['class' => "alert alert-{$variant}"]) }}
    @if ($dismissAfter) data-alert-dismiss-after="{{ $dismissAfter }}" @endif
>
    <svg class="alert-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8">
        {!! $icon !!}
    </svg>

    <div>
        @if ($title)
            <strong class="alert-title">{{ $title }}</strong>
        @endif

        <div>{{ $slot }}</div>
    </div>
</div>