@namespace SufiChain.SufiBlazor.Components.Data
@using SufiChain.SufiBlazor.Components.Common

<div class="sb-stat-card @Class">
    @if (Icon != null)
    {
        <div class="sb-stat-card__icon">
            @Icon
        </div>
    }
    
    <div class="sb-stat-card__content">
        <div class="sb-stat-card__label">@Label</div>
        <div class="sb-stat-card__value">
            @if (!string.IsNullOrEmpty(Prefix))
            {
                <span class="sb-stat-card__prefix">@Prefix</span>
            }
            @Value
            @if (!string.IsNullOrEmpty(Suffix))
            {
                <span class="sb-stat-card__suffix">@Suffix</span>
            }
        </div>
        
        @if (ShowTrend && Trend.HasValue)
        {
            var isPositive = Trend.Value >= 0;
            var trendClass = isPositive ? "sb-stat-card__trend--positive" : "sb-stat-card__trend--negative";
            <div class="sb-stat-card__trend @trendClass">
                <span class="sb-stat-card__trend-icon"><SbIcon Name="@(isPositive ? "arrow-up" : "arrow-down")" Size="SbSize.Sm" /></span>
                <span class="sb-stat-card__trend-value">@Math.Abs(Trend.Value).ToString("0.#")%</span>
                @if (!string.IsNullOrEmpty(TrendLabel))
                {
                    <span class="sb-stat-card__trend-label">@TrendLabel</span>
                }
            </div>
        }
        
        @if (!string.IsNullOrEmpty(Description))
        {
            <div class="sb-stat-card__description">@Description</div>
        }
    </div>
    
    @if (Actions != null)
    {
        <div class="sb-stat-card__actions">
            @Actions
        </div>
    }
</div>

@code {
    /// <summary>
    /// Stat label.
    /// </summary>
    [Parameter]
    public string Label { get; set; } = "";
    
    /// <summary>
    /// Stat value.
    /// </summary>
    [Parameter]
    public string Value { get; set; } = "";
    
    /// <summary>
    /// Value prefix.
    /// </summary>
    [Parameter]
    public string? Prefix { get; set; }
    
    /// <summary>
    /// Value suffix.
    /// </summary>
    [Parameter]
    public string? Suffix { get; set; }
    
    /// <summary>
    /// Icon content.
    /// </summary>
    [Parameter]
    public RenderFragment? Icon { get; set; }
    
    /// <summary>
    /// Trend percentage.
    /// </summary>
    [Parameter]
    public double? Trend { get; set; }
    
    /// <summary>
    /// Trend label (e.g., "vs last month").
    /// </summary>
    [Parameter]
    public string? TrendLabel { get; set; }
    
    /// <summary>
    /// Whether to show trend.
    /// </summary>
    [Parameter]
    public bool ShowTrend { get; set; } = true;
    
    /// <summary>
    /// Additional description.
    /// </summary>
    [Parameter]
    public string? Description { get; set; }
    
    /// <summary>
    /// Action buttons.
    /// </summary>
    [Parameter]
    public RenderFragment? Actions { get; set; }
    
    /// <summary>
    /// Additional CSS classes.
    /// </summary>
    [Parameter]
    public string? Class { get; set; }
}
