@namespace Lumeo.Docs.Shared

<nav class="sticky top-[84px] self-start hidden lg:block w-56" aria-label="Catalog categories">
    <ul class="space-y-1 text-sm">
        @foreach (var (category, count) in Categories)
        {
            <li>
                <a href="#@Slug(category)"
                   class="flex items-center justify-between rounded-md px-3 py-1.5 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors">
                    <span>@category</span>
                    <span class="text-[11px] font-mono text-muted-foreground/60">@count</span>
                </a>
            </li>
        }
    </ul>
</nav>

@code {
    [Parameter, EditorRequired] public Dictionary<string, int> Categories { get; set; } = new();

    private static string Slug(string s) => s.ToLowerInvariant().Replace(' ', '-').Replace('&', '-');
}
