//
//  StatBadge.swift
//  lichunWebsocket
//
//  Small component for displaying a single stat with icon
//

import SwiftUI

struct StatBadge: View {
    let icon: String
    let label: String
    let value: Int
    let color: Color

    var body: some View {
        VStack(spacing: AppSpacing.xs) {
            ZStack {
                Circle()
                    .fill(color.opacity(0.15))
                    .frame(width: 32, height: 32)

                Image(systemName: icon)
                    .font(.system(size: 16))
                    .foregroundColor(color)
            }

            Text("\(value)")
                .font(.appHeadline)
                .foregroundColor(AppColors.primaryText)

            Text(label)
                .font(.appSmall)
                .foregroundColor(AppColors.secondaryText)
        }
        .frame(maxWidth: .infinity)
        .padding(.vertical, AppSpacing.sm)
        .background(
            ZStack {
                AppColors.cardBackground

                LinearGradient(
                    colors: [
                        color.opacity(0.08),
                        Color.clear
                    ],
                    startPoint: .top,
                    endPoint: .bottom
                )
            }
        )
        .cornerRadius(AppSpacing.cornerRadius)
        .overlay(
            RoundedRectangle(cornerRadius: AppSpacing.cornerRadius)
                .stroke(color.opacity(0.15), lineWidth: 1)
        )
        .shadow(color: color.opacity(0.1), radius: 6, x: 0, y: 3)
    }
}

// MARK: - Preview
#if DEBUG
struct StatBadge_Previews: PreviewProvider {
    static var previews: some View {
        HStack(spacing: AppSpacing.sm) {
            StatBadge(
                icon: "heart.fill",
                label: "Health",
                value: 85,
                color: AppColors.health
            )

            StatBadge(
                icon: "face.smiling",
                label: "Happy",
                value: 92,
                color: AppColors.happiness
            )

            StatBadge(
                icon: "brain.head.profile",
                label: "Smart",
                value: 78,
                color: AppColors.intelligence
            )

            StatBadge(
                icon: "star.fill",
                label: "Prestige",
                value: 65,
                color: AppColors.prestige
            )
        }
        .padding()
        .background(AppColors.primaryBackground)
    }
}
#endif