<div class="card metric-card h-100@(Wide ? " metric-card-wide" : string.Empty)">
    <div class="card-body">
        <div class="metric-label">@Label</div>
        <div class="metric-value">@Value</div>
        @if (!string.IsNullOrWhiteSpace(Detail))
        {
            <div class="metric-detail">@Detail</div>
        }
    </div>
</div>

@code {
    [Parameter]
    public string Label { get; set; } = string.Empty;

    [Parameter]
    public string Value { get; set; } = string.Empty;

    [Parameter]
    public string? Detail { get; set; }

    /// <summary>Spans the card across two grid columns for long values such as timestamps.</summary>
    [Parameter]
    public bool Wide { get; set; }
}
