@namespace Lumeo.Docs.Layout
@using Lumeo.Docs.Services

<Stack Gap="1">
    @if (Collapsible)
    {
        <button class="flex items-center justify-between w-full mb-2 text-left text-sm font-semibold text-foreground hover:text-foreground/80 transition-colors"
                @onclick="OnToggle">
            <Heading Level="4" Class="text-sm text-left pointer-events-none">@Group.Label</Heading>
            <Blazicon Svg="@(IsExpanded ? Lucide.ChevronDown : Lucide.ChevronRight)" class="h-3.5 w-3.5 text-muted-foreground/60 shrink-0 transition-transform" />
        </button>
    }
    else
    {
        <Heading Level="4" Class="mb-2 text-sm">@Group.Label</Heading>
    }

    @if (!Collapsible || IsExpanded)
    {
        @if (Group.Items is { Count: > 0 } items)
        {
            <ul class="space-y-1">
                @foreach (var item in items)
                {
                    <li>
                        <NavLink href="@item.Href"
                                 class="block rounded-md px-2 py-1.5 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors no-underline">
                            @item.Label
                        </NavLink>
                    </li>
                }
            </ul>
        }

        @if (Group.Subgroups is { Count: > 0 } subs)
        {
            @foreach (var sub in subs)
            {
                <ul class="space-y-1 mt-2">
                    <li class="px-2 pt-1 pb-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60">
                        @sub.Label
                    </li>
                    @foreach (var item in sub.Items)
                    {
                        <li>
                            <NavLink href="@item.Href"
                                     class="block rounded-md px-2 py-1.5 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors no-underline">
                                @item.Label
                            </NavLink>
                        </li>
                    }
                </ul>
            }
        }
    }
</Stack>

@code {
    [Parameter, EditorRequired] public NavGroup Group { get; set; } = null!;
    [Parameter] public bool Collapsible { get; set; }
    [Parameter] public bool IsExpanded { get; set; } = true;
    [Parameter] public EventCallback OnToggle { get; set; }
}
