@namespace Lumeo

<div class="@RootClasses" style="@RootStyle" @attributes="AdditionalAttributes">
    @if (HeaderContent is not null || !string.IsNullOrEmpty(Title) || !string.IsNullOrEmpty(Description))
    {
        <div class="mb-3 flex flex-col gap-1">
            @if (HeaderContent is not null)
            {
                @HeaderContent
            }
            else
            {
                @if (!string.IsNullOrEmpty(Title))
                {
                    <div class="text-sm font-medium text-foreground">@Title</div>
                }
                @if (!string.IsNullOrEmpty(Description))
                {
                    <div class="text-xs text-muted-foreground">@Description</div>
                }
            }
        </div>
    }

    @if (ChildContent is not null)
    {
        <div class="flex-1 min-h-0">
            @ChildContent
        </div>
    }

    @if (FooterContent is not null)
    {
        <div class="mt-3 pt-3 border-t border-border/60">
            @FooterContent
        </div>
    }
</div>

@code {
    [Parameter] public int Span { get; set; } = 1;
    [Parameter] public int RowSpan { get; set; } = 1;
    [Parameter] public string? Title { get; set; }
    [Parameter] public string? Description { get; set; }
    [Parameter] public RenderFragment? HeaderContent { get; set; }
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public RenderFragment? FooterContent { get; set; }
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private string RootClasses => $"flex flex-col min-w-0 min-h-0 rounded-xl border border-border/60 bg-card text-card-foreground p-5 {Class}".Trim();

    private string RootStyle =>
        $"grid-column: span {Span} / span {Span}; grid-row: span {RowSpan} / span {RowSpan};";
}
