@namespace Lumeo

<div class="@CssClass" @attributes="AdditionalAttributes">
    @if (IconContent is not null)
    {
        <div class="mb-4 text-muted-foreground">
            @IconContent
        </div>
    }
    @if (Title is not null)
    {
        <h3 class="text-lg font-semibold">@Title</h3>
    }
    @if (Description is not null)
    {
        <p class="mt-1 text-sm text-muted-foreground">@Description</p>
    }
    @if (Action is not null)
    {
        <div class="mt-4">
            @Action
        </div>
    }
</div>

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

    [Parameter] public string? Title { get; set; }
    [Parameter] public string? Description { get; set; }
    [Parameter] public RenderFragment? Action { get; set; }
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private string CssClass => $"flex flex-col items-center justify-center px-6 py-12 text-center {Class}".Trim();
}
