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

@php
    $styles = [
        'success' => 'bg-emerald-50 text-emerald-950 ring-emerald-600/15 border-emerald-200/80',
        'error' => 'bg-red-50 text-red-950 ring-red-600/15 border-red-200/80',
        'warning' => 'bg-amber-50 text-amber-950 ring-amber-600/20 border-amber-200/80',
        'info' => 'bg-sky-50 text-sky-950 ring-sky-600/15 border-sky-200/80',
    ];
    $s = $styles[$type] ?? $styles['info'];
@endphp

<div
    x-data="{ show: true }"
    x-show="show"
    x-transition
    {{ $attributes->merge(['class' => 'rounded-lg border px-4 py-3 text-sm ring-1 '.$s]) }}
    role="alert"
>
    <div class="flex gap-3">
        <div class="min-w-0 flex-1">
            {{ $slot }}
        </div>
        @if ($dismissible)
            <button type="button" class="shrink-0 rounded p-1 opacity-70 hover:opacity-100" @click="show = false" aria-label="Tutup">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        @endif
    </div>
</div>