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

@php
    $variants = [
        'success' => 'border-success-text bg-success-600/10 text-success-text',
        'error' => 'border-error-text bg-error-600/10 text-error-text',
        'info' => 'border-accent-500 bg-accent-500/10 text-accent-text',
    ];

    $icons = [
        'success' => 'check',
        'error' => 'close',
        'info' => 'sparkles',
    ];

    $classes = 'flex items-start gap-3 rounded-none border-l-2 p-4 font-sans text-sm shadow-soft '
        . ($variants[$variant] ?? $variants['success']);
@endphp

<div role="alert" {{ $attributes->merge(['class' => $classes]) }}>
    <x-icon :name="$icons[$variant] ?? 'check'" :size="18" class="mt-0.5" />

    <div>
        @if ($title)
            <p class="font-semibold">{{ $title }}</p>
        @endif

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