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

@php
    $alertId = $id ?: 'alert-' . \Illuminate\Support\Str::uuid();

    $variantClass = match ($variant) {
        'success' => 'ui-alert-success',
        'danger', 'error' => 'ui-alert-error',
        'warning' => 'ui-alert-warning',
        default => 'ui-alert-info',
    };

    $role = in_array($variant, ['danger', 'error'], true)
        ? 'alert'
        : 'status';
@endphp

<div
    id="{{ $alertId }}"
    role="{{ $role }}"

    @if ($autoDismiss)
        data-flash-auto-dismiss="{{ $autoDismiss }}"
    @endif

    {{ $attributes->class([
        'ui-alert transform transition-all duration-200',
        $variantClass,
    ]) }}
>
    <div class="ui-alert-icon" aria-hidden="true">
        @isset($icon)
            {{ $icon }}
        @else
            @switch($variant)
                @case('success')
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4.5 12.75 6 6 9-13.5" />
                    </svg>
                    @break

                @case('danger')
                @case('error')
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
                    </svg>
                    @break

                @case('warning')
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.008v.008H12v-.008Z" />
                    </svg>
                    @break

                @default
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.25 11.25 12 10.5m0 0 .75.75M12 10.5v4.125m9-2.625a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                    </svg>
            @endswitch
        @endisset
    </div>

    <div class="min-w-0 flex-1">
        @if ($title)
            <div class="font-bold">
                {{ $title }}
            </div>
        @endif

        <div @class(['mt-1' => $title, 'leading-6'])>
            {{ $slot }}
        </div>
    </div>

    @if ($dismissible)
        <button
            type="button"
            data-dismiss-target="#{{ $alertId }}"
            class="ui-alert-close"
            aria-label="Fechar mensagem"
        >
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 18 6M6 6l12 12" />
            </svg>
        </button>
    @endif
</div>