@namespace Lumeo

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

@code {
    [Parameter] public StackDirection Direction { get; set; } = StackDirection.Vertical;
    [Parameter] public string? Gap { get; set; }
    [Parameter] public string? Align { get; set; }
    [Parameter] public string? Justify { get; set; }
    [Parameter] public bool Wrap { get; set; }
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private string CssClass
    {
        get
        {
            var direction = Direction == StackDirection.Vertical ? "flex flex-col" : "flex flex-row";
            var gap = !string.IsNullOrEmpty(Gap) ? $"gap-{Gap}" : "";
            var align = !string.IsNullOrEmpty(Align) ? $"items-{Align}" : "";
            var justify = !string.IsNullOrEmpty(Justify) ? $"justify-{Justify}" : "";
            var wrap = Wrap ? "flex-wrap" : "";
            return $"{direction} {gap} {align} {justify} {wrap} {Class}".Trim();
        }
    }

    public enum StackDirection { Vertical, Horizontal }
}
