@props([
    'variant' => 'neutral',
    'size' => 'md',
    'rounded' => 'full',
    'dot' => false,
    'pulse' => false,
    'icon' => null,
    'iconPosition' => 'left',
    'removable' => false,
    'outline' => false,
])

@php
    // AdminLTE badge base class
    $baseClasses = 'lte-badge';
    
    // Size classes - inline style adjustments
    $sizeStyles = match($size) {
        'xs' => 'padding: 0.2em 0.5em; font-size: 0.65em;',
        'sm' => 'padding: 0.25em 0.55em; font-size: 0.7em;',
        'md' => '',
        'lg' => 'padding: 0.4em 0.75em; font-size: 0.85em;',
        default => '',
    };
    
    // Icon size classes
    $iconSizeClasses = match($size) {
        'xs' => 'size-2.5',
        'sm' => 'size-3',
        'md' => 'size-3.5',
        'lg' => 'size-4',
        default => 'size-3.5',
    };
    
    // Dot size classes
    $dotSizeClasses = match($size) {
        'xs' => 'size-1.5',
        'sm' => 'size-1.5',
        'md' => 'size-2',
        'lg' => 'size-2',
        default => 'size-2',
    };
    
    // AdminLTE variant classes
    $variantClasses = match($variant) {
        'success' => 'lte-badge-success',
        'danger' => 'lte-badge-danger',
        'warning' => 'lte-badge-warning',
        'info' => 'lte-badge-info',
        'primary' => 'lte-badge-primary',
        'secondary' => 'lte-badge-secondary',
        'neutral' => 'lte-badge-light',
        default => 'lte-badge-secondary',
    };
    
    // Dot color classes - AdminLTE colors
    $dotColorClasses = match($variant) {
        'success' => 'lte-bg-success',
        'danger' => 'lte-bg-danger',
        'warning' => 'lte-bg-warning',
        'info' => 'lte-bg-info',
        'primary' => 'lte-bg-primary',
        'secondary' => 'lte-bg-secondary',
        'neutral' => 'lte-bg-light',
        default => 'lte-bg-secondary',
    };
    
    // Combined classes
    $classes = "$baseClasses $variantClasses";
    
    // Border radius style
    $borderRadius = match($rounded) {
        'none' => 'border-radius: 0;',
        'sm' => 'border-radius: 0.125rem;',
        'md' => 'border-radius: 0.25rem;',
        'lg' => 'border-radius: 0.375rem;',
        'full' => 'border-radius: 9999px;',
        default => 'border-radius: 9999px;',
    };
    
    $styles = trim("$sizeStyles $borderRadius");
@endphp

<span {{ $attributes->merge(['class' => $classes]) }} @if($styles) style="{{ $styles }}" @endif>
    {{-- Dot indicator --}}
    @if($dot)
        <span class="{{ $dotSizeClasses }} {{ $dotColorClasses }} rounded-full {{ $pulse ? 'animate-pulse' : '' }}"></span>
    @endif
    
    {{-- Left icon --}}
    @if($icon && $iconPosition === 'left')
        <x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
    @endif
    
    {{-- Content --}}
    {{ $slot }}
    
    {{-- Right icon --}}
    @if($icon && $iconPosition === 'right')
        <x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
    @endif
    
    {{-- Remove button --}}
    @if($removable)
        <button type="button" class="ml-1 -mr-1 hover:opacity-70 transition-opacity">
            <x-ri-close-line class="{{ $iconSizeClasses }}" />
        </button>
    @endif
</span>