@props([
    'type' => 'info',
    'dismissible' => false,
])

@php
    $types = [
        'success' => 'border-[var(--color-success)] bg-[color-mix(in_srgb,var(--color-success)_10%,transparent)] text-[var(--color-success)]',
        'danger' => 'border-[var(--color-danger)] bg-[color-mix(in_srgb,var(--color-danger)_10%,transparent)] text-[var(--color-danger)]',
        'warning' => 'border-[var(--color-warning)] bg-[color-mix(in_srgb,var(--color-warning)_10%,transparent)] text-[var(--color-warning)]',
        'info' => 'border-[var(--color-info)] bg-[color-mix(in_srgb,var(--color-info)_10%,transparent)] text-[var(--color-info)]',
    ];
    $typeClass = $types[$type] ?? $types['info'];
@endphp

<div
    @if ($dismissible)
        x-data="{ show: true }"
        x-show="show"
        x-cloak
    @endif
    role="alert"
    {{ $attributes->merge(['class' => "tw-alert {$typeClass}"]) }}
>
    <div class="flex-1 min-w-0">{{ $slot }}</div>

    @if ($dismissible)
        <button
            type="button"
            class="shrink-0 rounded p-0.5 opacity-70 hover:opacity-100"
            @click="show = false"
            aria-label="Dismiss"
        >
            <x-ui.icon name="x" class="h-4 w-4" />
        </button>
    @endif
</div>