@props([
    'variant' => 'muted',   // muted | brand | success | warning | error | on-dark | outline
    'icon' => null,
])

@php
    $class = match ($variant) {
        'brand' => 'pill-brand',
        'success' => 'pill-success',
        'warning' => 'pill-warning',
        'error' => 'pill-error',
        'on-dark' => 'pill-on-dark',
        'outline' => 'pill-idle',
        default => 'pill-muted',
    };
@endphp

<span {{ $attributes->merge(['class' => $class]) }}>
    @if ($icon)
        <x-icon :name="$icon" class="size-3.5" />
    @endif
    {{ $slot }}
</span>