@props([
    'type' => 'info',
    'title' => null,
    'dismissible' => true,
    'autohide' => false,
])

@php
    $icons = [
        'success' => 'fa-circle-check',
        'warning' => 'fa-triangle-exclamation',
        'danger' => 'fa-circle-exclamation',
        'info' => 'fa-circle-info',
    ];
@endphp

<div
    {{ $attributes->merge(['class' => 'alert alert--'.$type]) }}
    role="{{ in_array($type, ['danger', 'warning']) ? 'alert' : 'status' }}"
    @if ($autohide) data-alert-autohide @endif
>
    <i class="alert__icon fa-solid {{ $icons[$type] ?? $icons['info'] }}" aria-hidden="true"></i>

    <div class="alert__body">
        @if ($title)
            <div class="alert__title">{{ $title }}</div>
        @endif
        {{ $slot }}
    </div>

    @if ($dismissible)
        <button type="button" class="alert__dismiss" data-alert-dismiss aria-label="Dismiss message">&times;</button>
    @endif
</div>