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

@php
    $styles = [
        'success' => ['bg-emerald-50 border-emerald-200 text-emerald-800', 'check'],
        'error' => ['bg-red-50 border-red-200 text-red-800', 'exclamation'],
        'danger' => ['bg-red-50 border-red-200 text-red-800', 'exclamation'],
        'warning' => ['bg-amber-50 border-amber-200 text-amber-800', 'warning'],
        'info' => ['bg-blue-50 border-blue-200 text-blue-800', 'info'],
    ];

    [$classes, $icon] = $styles[$type] ?? $styles['info'];
@endphp

<div {{ $attributes->merge(['class' => "flex items-start gap-3 rounded-lg border px-4 py-3 text-sm {$classes}"]) }}
     @if ($dismissible) x-data="{ show: true }" x-show="show" x-cloak @endif>
    <x-icon :name="$icon" size="sm" class="mt-0.5 shrink-0" />

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

        <div class="{{ $title ? 'mt-0.5' : '' }}">{{ $slot }}</div>
    </div>

    @if ($dismissible)
        <button type="button" @click="show = false" class="shrink-0 rounded p-1 hover:bg-black/5">
            <x-icon name="x" size="xs" />
        </button>
    @endif
</div>