import SwiftUI

struct MetricCard: View {
    let icon: String
    let title: String
    let value: String
    let detail: String?
    let color: Color
    
    var body: some View {
        VStack(alignment: .leading, spacing: ProatSpacing.s) {
            HStack(alignment: .center, spacing: ProatSpacing.s) {
                ZStack {
                    RoundedRectangle(cornerRadius: ProatRadius.knop, style: .continuous)
                        .fill(Color.proatTealTint)
                    Image(systemName: icon)
                        .resizable()
                        .scaledToFit()
                        .frame(width: 18, height: 18)
                        .foregroundColor(.proatTeal)
                }
                .frame(width: 34, height: 34)

                Text(title)
                    .font(ProatFont.sectie)
                    .foregroundColor(.proatText2)
                    .lineLimit(1)
                    .minimumScaleFactor(0.8)
            }

            Text(value)
                .font(.system(size: 26, weight: .bold, design: .rounded))
                .foregroundColor(.proatText1)
                .lineLimit(1)
                .minimumScaleFactor(0.6)

            if let detail, !detail.isEmpty {
                Text(detail)
                    .font(ProatFont.klein)
                    .foregroundColor(.proatText3)
                    .lineLimit(2)
                    .multilineTextAlignment(.leading)
                    .fixedSize(horizontal: false, vertical: true)
            }
        }
        .frame(maxWidth: .infinity, alignment: .topLeading)
        .proatCard(padding: ProatSpacing.m)
    }
}
