@props([
    'variant' => 'success',
    'dismissAfter' => 5000,
    'autoDismiss' => null,
])

@php
    $autoDismiss = $autoDismiss ?? $variant === 'success';
    $variantClasses = match ($variant) {
        'error' => 'border-red-200 bg-red-50 text-red-800',
        default => 'border-green-200 bg-green-50 text-green-800',
    };
@endphp

<div
    role="{{ $variant === 'error' ? 'alert' : 'status' }}"
    {{ $attributes->class(['rounded-xl border px-4 py-3 text-sm', $variantClasses]) }}
    @if ($autoDismiss)
        x-data="flashAlert({{ (int) $dismissAfter }})"
        x-show="visible"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
    @endif
>
    {{ $slot }}
</div>