@props(['color' => 'gray', 'size' => 'sm', 'dot' => false])

@php
    $colors = [
        'gray'    => 'bg-ink-100 text-ink-700',
        'indigo'  => 'bg-brand-50 text-brand-700',
        'brand'   => 'bg-brand-50 text-brand-700',
        'emerald' => 'bg-emerald-50 text-emerald-700',
        'amber'   => 'bg-amber-50 text-amber-700',
        'orange'  => 'bg-orange-50 text-orange-700',
        'rose'    => 'bg-rose-50 text-rose-700',
        'sky'     => 'bg-sky-50 text-sky-700',
        'violet'  => 'bg-violet-50 text-violet-700',
    ][$color] ?? 'bg-ink-100 text-ink-700';

    $dotColors = [
        'gray'    => 'bg-ink-400',
        'indigo'  => 'bg-brand-500',
        'brand'   => 'bg-brand-500',
        'emerald' => 'bg-emerald-500',
        'amber'   => 'bg-amber-500',
        'orange'  => 'bg-orange-500',
        'rose'    => 'bg-rose-500',
        'sky'     => 'bg-sky-500',
        'violet'  => 'bg-violet-500',
    ][$color] ?? 'bg-ink-400';

    $sizes = [
        'xs' => 'text-[10px] px-1.5 py-0.5',
        'sm' => 'text-xs px-2 py-0.5',
        'md' => 'text-sm px-2.5 py-1',
    ][$size] ?? 'text-xs px-2 py-0.5';
@endphp

<span {{ $attributes->merge(['class' => "pill inline-flex items-center font-medium rounded-full $colors $sizes"]) }}>
    @if ($dot)
        <span class="w-1.5 h-1.5 rounded-full {{ $dotColors }} mr-1"></span>
    @endif
    {{ $slot }}
</span>