<div style="@(heightStyle + visiblilityStyle)">
    @if(Title is not null) {
        <p>@Title</p>
        <hr/>
    }
    @ChildContent
</div>

@code {
    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public int HeightPixels  { set => height = $"{value}px"; }
    [Parameter]
    public int HeightPercent { set => height = $"{value}%"; }

    public bool Visible {
        get => visible;
        set {
            visible = value;
            StateHasChanged();
        }
    }

    public void Show() => Visible = true;
    public void Hide() => Visible = false;

    private bool visible = false;

    private string? height;

    private string heightStyle =>
        $"{(height is null ? "" : $"max-height:{height};")}";

    private string visiblilityStyle =>
        Visible ? "opacity:1;visibility:visible;" : "opacity:0;visibility:hidden;";
}