@props([
    'href' => '#',
    'icon' => null,
    'label' => '',
    'selected' => false,
    'active' => false,
    'hasDropdown' => false,
    'badge' => null,
    'badgeVariant' => 'new', // new, pro
])

<li>
    <a
        href="{{ $href }}"
        @if($hasDropdown)
            @click.prevent="selected = (selected === '{{ $label }}' ? '' : '{{ $label }}')"
        @else
            @click="selected = (selected === '{{ $label }}' ? '' : '{{ $label }}')"
        @endif
        class="menu-item group"
        :class="(selected === '{{ $label }}') {{ $active ? "|| (" . $active . ")" : '' }} ? 'menu-item-active' : 'menu-item-inactive'"
    >
        @if($icon)
            <span
                :class="(selected === '{{ $label }}') {{ $active ? "|| (" . $active . ")" : '' }} ? 'menu-item-icon-active' : 'menu-item-icon-inactive'"
            >
                {!! $icon !!}
            </span>
        @endif

        <span
            class="menu-item-text"
            :class="sidebarToggle ? 'lg:hidden' : ''"
        >
            {{ $label }}
        </span>

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

        @if($hasDropdown)
            <svg
                class="menu-item-arrow"
                :class="[(selected === '{{ $label }}') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
                    stroke=""
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                />
            </svg>
        @endif
    </a>

    @if($hasDropdown && isset($dropdown))
        <!-- Dropdown Menu Start -->
        <div
            class="translate transform overflow-hidden"
            :class="(selected === '{{ $label }}') ? 'block' : 'hidden'"
        >
            <ul
                :class="sidebarToggle ? 'lg:hidden' : 'flex'"
                class="menu-dropdown mt-2 flex flex-col gap-1 pl-9"
            >
                {{ $dropdown }}
            </ul>
        </div>
        <!-- Dropdown Menu End -->
    @endif
</li>