Alert code

@props([
    'variant' => 'info',
    'title' => null,
    'icon' => null,
    'dismissible' => false,
])

@php
    /*
    | Contextual alert / banner.
    |
    | Variants: info, success, warning, danger, neutral
    |
    | Usage:
    |   <x-ui.alert variant="success" title="Saved" dismissible>Your changes are live.</x-ui.alert>
    */
    $config = [
        'info' => ['wrap' => 'bg-accent-50 dark:bg-accent-950/40 border-accent-200 dark:border-accent-900 text-accent-800 dark:text-accent-200', 'icon' => 'info', 'iconColor' => 'text-accent-500'],
        'success' => ['wrap' => 'bg-green-50 dark:bg-green-950/40 border-green-200 dark:border-green-900 text-green-800 dark:text-green-200', 'icon' => 'check-circle', 'iconColor' => 'text-green-500'],
        'warning' => ['wrap' => 'bg-amber-50 dark:bg-amber-950/40 border-amber-200 dark:border-amber-900 text-amber-800 dark:text-amber-200', 'icon' => 'warning', 'iconColor' => 'text-amber-500'],
        'danger' => ['wrap' => 'bg-red-50 dark:bg-red-950/40 border-red-200 dark:border-red-900 text-red-800 dark:text-red-200', 'icon' => 'warning-octagon', 'iconColor' => 'text-red-500'],
        'neutral' => ['wrap' => 'bg-gray-50 dark:bg-gray-800/60 border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200', 'icon' => 'bell', 'iconColor' => 'text-gray-500'],
    ][$variant] ?? null;

    $config ??= [
        'wrap' => 'bg-gray-50 dark:bg-gray-800/60 border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200',
        'icon' => 'info', 'iconColor' => 'text-gray-500',
    ];

    $iconName = $icon ?? $config['icon'];
@endphp

<div
    @if ($dismissible) x-data="{ show: true }" x-show="show" @endif
    role="alert"
    {{ $attributes->merge(['class' => 'flex items-start gap-3 rounded-xl border p-4 '.$config['wrap']]) }}
>
    <x-ui.icon :name="$iconName" weight="fill" size="lg" class="{{ $config['iconColor'] }} mt-0.5 shrink-0" />

    <div class="flex-1 min-w-0 text-sm">
        @if ($title)
            <p class="font-semibold">{{ $title }}</p>
        @endif
        @if (! $slot->isEmpty())
            <div class="{{ $title ? 'mt-0.5 opacity-90' : '' }}">{{ $slot }}</div>
        @endif
    </div>

    @if ($dismissible)
        <button type="button" @click="show = false" class="shrink-0 -m-1 p-1 rounded-md opacity-60 hover:opacity-100 transition" aria-label="Dismiss">
            <x-ui.icon name="x" weight="bold" size="base" />
        </button>
    @endif
</div>