{{--
    A soft pill for any label that is not backed by a status enum — access
    level, "You", a count, a flag.

        <x-badge color="success" dot>Active</x-badge>
        <x-badge color="primary" icon="shield-lock">Master User</x-badge>
        <x-badge color="warning" icon="key" title="Temporary password">Password pending</x-badge>

    `dot` renders a leading dot instead of an icon — use it for the live/not-live
    statuses that repeat down a column (Active / Inactive / Disabled). The dot is
    what the eye finds when scanning; an icon on every row is noise. `icon` suits
    the badges that appear once or twice on a screen.

    `color` is a Bootstrap theme name: primary, secondary, success, info,
    warning, danger, light, dark. Every one of them is defined as a soft fill in
    the stylesheet, so a badge can never come out as a saturated block.

    Statuses that DO have an enum must use <x-status-badge> instead, so the
    label and colour stay owned by the enum.
--}}
@props([
    'color' => 'secondary',
    'icon' => null,
    'dot' => false,
])

<span {{ $attributes->merge(['class' => 'badge text-bg-'.$color]) }}>
    @if ($dot)
        <span class="badge__dot" aria-hidden="true"></span>
    @elseif ($icon)
        <i class="bi bi-{{ $icon }}" aria-hidden="true"></i>
    @endif{{ $slot }}</span>
