@props(['item'])

<div class="kt-menu-item {{ $item['is_active'] ?? false ? 'active' : '' }}">
    <a class="kt-menu-link border border-transparent items-center grow kt-menu-item-active:bg-accent/60 dark:menu-item-active:border-border kt-menu-item-active:rounded-lg hover:bg-accent/60 hover:rounded-lg gap-[14px] ps-[10px] pe-[10px] py-[8px]"
       href="{{ $item['url'] ?? '#' }}"
       tabindex="0">
        <span class="kt-menu-bullet flex w-[6px] -start-[3px] rtl:start-0 relative before:absolute before:top-0 before:size-[6px] before:rounded-full rtl:before:translate-x-1/2 before:-translate-y-1/2 kt-menu-item-active:before:bg-primary kt-menu-item-hover:before:bg-primary">
        </span>
        <span class="kt-menu-title text-2sm font-normal text-foreground kt-menu-item-active:text-primary kt-menu-item-active:font-semibold kt-menu-link-hover:!text-primary">
            {{ $item['label'] }}
        </span>
        @if(isset($item['badge']))
            <span class="kt-badge kt-badge-sm {{ $item['badge']['class'] ?? 'kt-badge-primary' }}">
                {{ $item['badge']['text'] }}
            </span>
        @endif
    </a>
</div>