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

@php
    $variants = [
        'success' => ['bg-success/8 border-success/30', 'text-success', 'M20 6 9 17l-5-5'],
        'warning' => ['bg-warning/8 border-warning/30', 'text-warning', 'M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'],
        'danger'  => ['bg-danger/8 border-danger/30', 'text-danger', 'M12 9v4m0 4h.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z'],
        'info'    => ['bg-info/8 border-info/30', 'text-info', 'M12 16v-4m0-4h.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z'],
    ];

    [$shell, $tint, $path] = $variants[$variant] ?? $variants['info'];
@endphp

<div role="alert" {{ $attributes->merge([
    'class' => 'flex gap-3 rounded-lg border p-4 '.$shell,
]) }}>
    <svg class="mt-0.5 h-5 w-5 shrink-0 {{ $tint }}" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2" stroke-linecap="round"
         stroke-linejoin="round" aria-hidden="true">
        <path d="{{ $path }}"/>
    </svg>

    <div class="min-w-0 flex-1 text-sm">
        @if ($title)
            <p class="font-medium {{ $tint }}">{{ $title }}</p>
        @endif

        <div class="{{ $title ? 'mt-1 ' : '' }}text-silver-300">
            {{ $slot }}
        </div>
    </div>
</div>