@namespace LumexUI.Docs.Client.Components
@inject NavigationManager NavigationManager

<CascadingValue TValue="DocsSection" Value="@this" IsFixed="@true">
    <LumexComponent As="@(IsSubsection ? "h3" : "h2")"
                    id="@_id">
        <LumexLink Href="@($"{RelativePath}#{_id}")"
                   Color="@ThemeColor.None"
                   Class="border-none">
            @Title
            <span class="flex items-center justify-center size-6 ml-2 rounded-md text-foreground-400 shadow-sm ring-1 ring-foreground-950/5 hover:ring-orange-200 hover:bg-orange-50 hover:text-orange-500">
                <LumexIcon Icon="@Icons.Rounded.Link"
                           Size="@new("16")" />
            </span>
        </LumexLink>
    </LumexComponent>
    @ChildContent
</CascadingValue>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public string? Title { get; set; }

    [CascadingParameter] private DocsSection? Parent { get; set; }

    private bool IsSubsection => Parent is not null;
    private string RelativePath => NavigationManager.ToBaseRelativePath( NavigationManager.Uri );

    private string? _id;

    protected override void OnInitialized()
    {
        _id = Title?.ToKebabCase();
    }
}
