@namespace Lumeo

<a href="@Href" class="@CssClass" title="@Tooltip" @attributes="AdditionalAttributes">
    @if (IconContent is not null)
    {
        <span class="shrink-0 inline-flex items-center justify-center">@IconContent</span>
        @if (LabelContent is not null)
        {
            <span class="@LabelCssClass">@LabelContent</span>
        }
    }
    else
    {
        @ChildContent
    }
</a>

@code {
    [CascadingParameter] public SidebarProvider.SidebarState? State { get; set; }
    [Parameter] public RenderFragment? ChildContent { get; set; }

    /// <summary>Icon slot. Named <c>IconContent</c> to avoid shadowing the <c>&lt;Icon&gt;</c> component.</summary>
    [Parameter] public RenderFragment? IconContent { get; set; }

    /// <summary>Label slot. Named <c>LabelContent</c> to avoid shadowing the <c>&lt;Label&gt;</c> component.</summary>
    [Parameter] public RenderFragment? LabelContent { get; set; }

    [Parameter] public string? Href { get; set; }
    [Parameter] public string? Tooltip { get; set; }
    [Parameter] public bool IsActive { get; set; }
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private bool IsCollapsed => State?.IsCollapsed ?? false;

    private string CssClass => string.Join(" ", new[] {
        "flex items-center gap-3 rounded-lg py-2 min-h-11 sm:min-h-0 text-muted-foreground hover:text-foreground hover:bg-sidebar-accent focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring focus-visible:ring-offset-2 w-full overflow-hidden",
        "transition-[padding,background-color,color] duration-300 ease-out",
        IsCollapsed ? "px-4" : "px-3",
        IsActive ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium" : null,
        Class
    }.Where(s => !string.IsNullOrWhiteSpace(s)));

    // Opacity-only fade. The sidebar's own width transition handles the visual shrink
    // — the label stays at natural width and is clipped by the parent's overflow-x-hidden,
    // so the icon stays put while the sidebar narrows instead of "sliding to center".
    // A small delay on the fade makes the sidebar start shrinking first, avoiding the
    // awkward mid-state where labels are gone but sidebar is still wide.
    private string LabelCssClass => string.Join(" ", new[] {
        "whitespace-nowrap transition-opacity duration-150 ease-out",
        IsCollapsed ? "opacity-0 delay-0" : "opacity-100 delay-150"
    });
}
