@namespace Lumeo

<div class="@CssClass" role="menu" @attributes="AdditionalAttributes">
    <div class="@GridCssClass">
        @ChildContent
    </div>
</div>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public bool FullWidth { get; set; } = true;
    [Parameter] public int Columns { get; set; } = 4;
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private string WidthCssClass => FullWidth ? "left-0 right-0" : "w-auto min-w-[600px]";

    private string CssClass => $"absolute top-full z-50 {WidthCssClass} bg-popover border border-border/40 rounded-lg shadow-lg p-6 {Class}".Trim();

    private string GridCssClass => Columns switch {
        1 => "grid grid-cols-1 gap-6",
        2 => "grid grid-cols-2 gap-6",
        3 => "grid grid-cols-3 gap-6",
        4 => "grid grid-cols-4 gap-6",
        5 => "grid grid-cols-5 gap-6",
        _ => "grid grid-cols-1 gap-6"
    };
}
