@props([
    'variant' => 'info', // primary, secondary, success, danger, warning, info, ghost
    'size' => 'md',      // sm, md
    'icon' => null,
])

@php
    $baseClasses = 'inline-flex items-center gap-1.5 font-semibold text-[11px] tracking-wide px-2.5 py-1 rounded-full border transition-colors duration-150 whitespace-nowrap';

    $variants = [
        'blue'      => 'text-[#4b82f7] bg-[rgba(75,130,247,0.12)] border-[rgba(75,130,247,0.35)]',
        'primary'   => 'text-[#4b82f7] bg-[rgba(75,130,247,0.12)] border-[rgba(75,130,247,0.35)]',
        'info'      => 'text-[#4b82f7] bg-[rgba(75,130,247,0.12)] border-[rgba(75,130,247,0.35)]',
        'red'       => 'text-[#ef4a5f] bg-[rgba(239,74,95,0.1)] border-[rgba(239,74,95,0.32)]',
        'danger'    => 'text-[#ef4a5f] bg-[rgba(239,74,95,0.1)] border-[rgba(239,74,95,0.32)]',
        'success'   => 'text-[#21c274] bg-[rgba(33,194,116,0.12)] border-[rgba(33,194,116,0.35)]',
        'warning'   => 'text-[#f0a939] bg-[rgba(240,169,57,0.12)] border-[rgba(240,169,57,0.35)]',
        'secondary' => 'text-slate-400 bg-[#0d1220] border-[#232b3d]',
        'ghost'     => 'text-slate-400 bg-[#0d1220] border-[#232b3d]',
    ];

    $sizes = [
        'sm' => 'px-2 py-0.5 text-[10.5px]',
        'md' => 'px-2.5 py-1 text-[11px]',
    ];

    $classes = implode(' ', [
        $baseClasses,
        $variants[$variant] ?? $variants['ghost'],
        $sizes[$size] ?? $sizes['md'],
    ]);
@endphp

<span {{ $attributes->merge(['class' => $classes]) }}>
    @if($icon)
        <i class="{{ $icon }}"></i>
    @endif
    @if(trim($slot))
        <span>{{ $slot }}</span>
    @endif
</span>