@props(['variant' => 'neutral'])
@php
    $variants = [
    'neutral' => 'bg-black text-white',
    'success' => 'bg-green-100 text-green-950',
    'error' => 'bg-red-100 text-red-950'
    ];

$variantClasses = $variants[$variant];
@endphp
<div class="wrapper alert flex items-center space-x-4 py-2 px-4 rounded-lg text-xs font-bold {{$variantClasses}} ">
    <div class="flex-1">
        {{$slot}}
    </div>
    <div>
        <x-ui.button-sm onclick="removeAlert(this)">
            <x-heroicon-o-x-mark class="w-4"/>
        </x-ui.button-sm>
    </div>
</div>
@vite('resources/js/alert.js')