@namespace Lumeo

<div class="relative w-full" style="padding-bottom: @(100.0 / Ratio)%" @attributes="AdditionalAttributes">
    <div class="@CssClass">
        @ChildContent
    </div>
</div>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public double Ratio { get; set; } = 1;
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private string CssClass => $"absolute inset-0 {Class}".Trim();
}
