@props([
    'status' => 'ok',   // ok|warn|bad|unknown
    'label'  => null,
    'detail' => null,
    'pulse'  => true,
])

@php
    $map = [
        'ok'      => ['dot' => 'bg-emerald-500', 'text' => 'text-emerald-600 dark:text-emerald-400', 'ring' => 'bg-emerald-500/40'],
        'warn'    => ['dot' => 'bg-amber-500',   'text' => 'text-amber-600 dark:text-amber-400',     'ring' => 'bg-amber-500/40'],
        'bad'     => ['dot' => 'bg-red-500',     'text' => 'text-red-600 dark:text-red-400',         'ring' => 'bg-red-500/40'],
        'unknown' => ['dot' => 'bg-slate-400',   'text' => 'text-slate-500 dark:text-slate-400',     'ring' => 'bg-slate-400/40'],
    ];
    $s = $map[$status] ?? $map['unknown'];
@endphp

<span {{ $attributes->merge(['class' => 'inline-flex items-center gap-2']) }}>
    <span class="relative flex size-2" aria-hidden="true">
        {{-- Only healthy services pulse; a red light that animates reads as
             "working on it" rather than "broken". --}}
        @if ($pulse && $status === 'ok')
            <span class="absolute inline-flex size-full animate-ping rounded-full {{ $s['ring'] }}"></span>
        @endif
        <span class="relative inline-flex size-2 rounded-full {{ $s['dot'] }}"></span>
    </span>

    @if ($label)
        <span class="text-xs font-semibold {{ $s['text'] }}">{{ $label }}</span>
    @endif

    @if ($detail)
        <span class="text-[11px] text-slate-400 dark:text-slate-500">{{ $detail }}</span>
    @endif

    {{-- Screen readers get the state in words, not just colour. --}}
    <span class="sr-only">status: {{ $label ?? $status }}{{ $detail ? ', '.$detail : '' }}</span>
</span>