@namespace Lumeo

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

@code {
    [Parameter] public int Columns { get; set; } = 1;
    [Parameter] public string? Gap { get; set; } = "4";
    [Parameter] public string? RowGap { get; set; }
    [Parameter] public string? ColGap { 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 gap = !string.IsNullOrEmpty(Gap) ? $"gap-{Gap}" : "";
            var rowGap = !string.IsNullOrEmpty(RowGap) ? $"gap-y-{RowGap}" : "";
            var colGap = !string.IsNullOrEmpty(ColGap) ? $"gap-x-{ColGap}" : "";
            return $"grid grid-cols-{Columns} {gap} {rowGap} {colGap} {Class}".Trim();
        }
    }
}
