@props([
    'href' => '#',
    'label' => '',
    'active' => false,
    'badge' => null,
    'badges' => [], // Multiple badges support: [['text' => 'New', 'variant' => 'new'], ['text' => 'Pro', 'variant' => 'pro']]
])

<li>
    <a
        href="{{ $href }}"
        class="menu-dropdown-item group {{ $active ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive' }}"
    >
        {{ $label }}

        @if($badge || count($badges) > 0)
            <span class="absolute right-3 flex items-center gap-1">
                @if($badge)
                    <span
                        class="menu-dropdown-badge {{ $active ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive' }}"
                    >
                        {{ $badge }}
                    </span>
                @endif

                @foreach($badges as $badgeItem)
                    <span
                        class="menu-dropdown-badge {{ $active ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive' }}"
                    >
                        {{ $badgeItem['text'] ?? $badgeItem }}
                    </span>
                @endforeach
            </span>
        @endif
    </a>
</li>