//
//  HandValueBadge.swift
//  Baccarat
//
//  A circular badge displaying the hand value.
//

import SwiftUI
import CasinoKit

/// A small circular badge showing the hand value.
struct HandValueBadge: View {
    let value: Int
    let color: Color
    
    // MARK: - Environment
    
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    
    // MARK: - Computed Properties
    
    /// Whether we're on a large screen (iPad)
    private var isLargeScreen: Bool {
        horizontalSizeClass == .regular
    }
    
    @ScaledMetric(relativeTo: .headline) private var baseValueFontSize: CGFloat = 15
    @ScaledMetric(relativeTo: .headline) private var baseBadgeSize: CGFloat = 26
    
    /// Font size - larger on iPad
    private var valueFontSize: CGFloat {
        isLargeScreen ? baseValueFontSize * 1.5 : baseValueFontSize
    }
    
    /// Badge size - larger on iPad
    private var badgeSize: CGFloat {
        isLargeScreen ? baseBadgeSize * 1.5 : baseBadgeSize
    }
    
    // MARK: - Body
    
    var body: some View {
        Text("\(value)")
            .font(.system(size: valueFontSize, weight: .black, design: .rounded))
            .foregroundStyle(.white)
            .frame(width: badgeSize, height: badgeSize)
            .background(
                Circle()
                    .fill(color)
            )
    }
}

// MARK: - Previews

#Preview("Player Value (Blue)") {
    ZStack {
        Color.Table.backgroundDark
        HandValueBadge(value: 8, color: .blue)
    }
}

#Preview("Banker Value (Red)") {
    ZStack {
        Color.Table.backgroundDark
        HandValueBadge(value: 5, color: .red)
    }
}

#Preview("Natural 9") {
    ZStack {
        Color.Table.backgroundDark
        HandValueBadge(value: 9, color: .blue)
    }
}

#Preview("Zero Value") {
    ZStack {
        Color.Table.backgroundDark
        HandValueBadge(value: 0, color: .red)
    }
}

