@props(['type' => 'success', 'title' => null])

@php
    [$styles, $icon] = match ($type) {
        'error' => ['border-error/25 bg-error/5 text-error', 'alert'],
        'warning' => ['border-warning/30 bg-warning/5 text-warning', 'alert'],
        'info' => ['border-primary-200 bg-primary-50 text-primary', 'info'],
        default => ['border-success/25 bg-success/5 text-success', 'check-circle'],
    };
@endphp

{{-- Status is carried by an icon and wording, never colour alone (SOW B.5). --}}
<div role="{{ $type === 'error' ? 'alert' : 'status' }}"
     {{ $attributes->merge(['class' => 'flex items-start gap-3 rounded-xl border px-4 py-3.5 text-sm '.$styles]) }}>
    <x-icon :name="$icon" class="mt-0.5 size-4 shrink-0" />

    <div class="min-w-0">
        @if ($title)
            <p class="font-semibold">{{ $title }}</p>
        @endif
        <div @class(['text-text-secondary' => $type === 'info', 'mt-0.5' => $title])>{{ $slot }}</div>
    </div>
</div>