@props([
    'href',
    'label',
    'active' => false,
    'external' => false,
    'badge' => null,
])

<a
    href="{{ $href }}"
    @click="sidebarOpen = false"
    @if ($external)
        target="_blank"
        rel="noopener noreferrer"
    @endif
    @class([
        'app-sidebar-link',
        'app-sidebar-link-active' => $active,
    ])
    @if ($active)
        aria-current="page"
    @endif
>
    @isset($icon)
        <span class="app-sidebar-icon-wrap">
            {{ $icon }}
        </span>
    @endisset

    <span class="min-w-0 flex-1 truncate">
        {{ $label }}
    </span>

    @if ($badge)
        <span class="app-sidebar-badge">
            {{ $badge }}
        </span>
    @endif

    @if ($external)
        <svg
            class="h-3.5 w-3.5 flex-none text-slate-500"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            aria-hidden="true"
        >
            <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.8"
                d="M13.5 6H18m0 0v4.5M18 6l-7.5 7.5M10.5 6H6A1.5 1.5 0 0 0 4.5 7.5V18A1.5 1.5 0 0 0 6 19.5h10.5A1.5 1.5 0 0 0 18 18v-4.5"
            />
        </svg>
    @endif
</a>