<div class="admin-metric-card @Accent cursor-pointer" @onclick="OnClick">
    <div class="admin-metric-card-body">
        <span class="admin-metric-card-label">@Label</span>
        <div class="admin-metric-card-value-row">
            <span class="admin-metric-card-value" style="color: @ValueColor;">@Value</span>
            <span class="admin-metric-card-icon" style="color: @IconColor;">@Icon</span>
        </div>
        <span class="admin-metric-card-caption">@Caption</span>
    </div>
</div>

@code {
    [Parameter, EditorRequired]
    public string Label { get; set; } = "";

    [Parameter, EditorRequired]
    public object? Value { get; set; }

    [Parameter, EditorRequired]
    public string Caption { get; set; } = "";

    [Parameter, EditorRequired]
    public string Accent { get; set; } = "";

    [Parameter, EditorRequired]
    public string Icon { get; set; } = "";

    [Parameter]
    public string ValueColor { get; set; } = "inherit";

    [Parameter]
    public string IconColor { get; set; } = "inherit";

    [Parameter]
    public EventCallback OnClick { get; set; }
}
