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

@php
    $types = [
        'primary' => 'bg-indigo-100 text-indigo-800',
        'secondary' => 'bg-purple-100 text-purple-800',
        'success' => 'bg-green-100 text-green-800',
        'danger'  => 'bg-red-100 text-red-800',
        'warning' => 'bg-yellow-100 text-yellow-800',
        'info'    => 'bg-blue-100 text-blue-800',
        'neutral' => 'bg-gray-100 text-gray-800',
    ];

    $base = 'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium';
    $typeClass = $types[$type] ?? $types['neutral'];
@endphp

<span {{ $attributes->merge(['class' => $base . ' ' . $typeClass, 'role' => 'status']) }}>
    @if($title)
        <span class="sr-only">{{ $title }}</span>
    @endif
    {{ $slot }}
</span>