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

@php
    $type = in_array($type, ['info', 'success', 'warning', 'error'], true) ? $type : 'info';
    $defaults = [
        'info' => ['title' => __('kview-ui-core::ui.alert.info'), 'icon' => 'info'],
        'success' => ['title' => __('kview-ui-core::ui.alert.success'), 'icon' => 'check'],
        'warning' => ['title' => __('kview-ui-core::ui.alert.warning'), 'icon' => 'alert'],
        'error' => ['title' => __('kview-ui-core::ui.alert.error'), 'icon' => 'x'],
    ];
    $icon = $icon ?: $defaults[$type]['icon'];
    $role = $type === 'error' ? 'alert' : 'status';
@endphp

<div {{ $attributes->class(['ui-alert', 'ui-alert--'.$type])->merge(['role' => $role, 'data-ui-alert' => true]) }}>
    <span class="ui-alert-icon" aria-hidden="true">
        <x-ui.icon :name="$icon" size="16" />
    </span>
    <span class="ui-alert-copy">
        <strong>{{ $title ?: $defaults[$type]['title'] }}</strong>
        @if ($message)
            <span>{{ $message }}</span>
        @endif
        {{ $slot }}
    </span>
    @if ($dismissible)
        <x-ui.icon-button
            icon="x"
            :label="__('kview-ui-core::ui.alert.dismiss')"
            variant="ghost"
            size="sm"
            :tooltip="false"
            class="ui-alert-close"
            data-ui-alert-close
        />
    @endif
</div>