import SwiftUI

struct Tx: Identifiable { let id = UUID(); let name: String; let sub: String; let amount: Double; let icon: String }

struct WalletView: View {
    let transactions: [Tx] = [
        .init(name: "Spotify", sub: "Subscriptions", amount: -11.99, icon: "music.note"),
        .init(name: "Salary", sub: "Acme Inc", amount: 4200, icon: "briefcase.fill"),
        .init(name: "Whole Foods", sub: "Groceries", amount: -86.4, icon: "cart.fill"),
        .init(name: "Uber", sub: "Transport", amount: -18.2, icon: "car.fill")
    ]

    var body: some View {
        ZStack {
            Color(red: 0.04, green: 0.05, blue: 0.04).ignoresSafeArea()
            ScrollView {
                VStack(alignment: .leading, spacing: 16) {
                    Text("Good afternoon, Maya").foregroundColor(Color(white: 0.6))
                    VStack(alignment: .leading, spacing: 8) {
                        Text("Total balance").font(.subheadline).foregroundColor(Color(red: 0.37, green: 0.68, blue: 0.48))
                        Text("$12,480.55").font(.system(size: 40, weight: .heavy)).foregroundColor(.white)
                        HStack {
                            Text("•••• 4921").foregroundColor(Color(red: 0.5, green: 0.75, blue: 0.58))
                            Spacer()
                            Text("+2.4% this month").foregroundColor(Color(red: 0.13, green: 0.77, blue: 0.37))
                        }
                    }
                    .padding(24).background(Color(red: 0.06, green: 0.10, blue: 0.07)).cornerRadius(24)

                    Text("Recent activity").font(.title3).bold().foregroundColor(.white).padding(.top, 8)
                    ForEach(transactions) { tx in
                        HStack(spacing: 14) {
                            Image(systemName: tx.icon).frame(width: 46, height: 46)
                                .background(Color.white.opacity(0.05)).cornerRadius(14).foregroundColor(.white)
                            VStack(alignment: .leading, spacing: 2) {
                                Text(tx.name).fontWeight(.semibold).foregroundColor(.white)
                                Text(tx.sub).font(.footnote).foregroundColor(.gray)
                            }
                            Spacer()
                            Text(tx.amount < 0 ? "-$\(abs(tx.amount), specifier: "%.2f")" : "+$\(tx.amount, specifier: "%.2f")")
                                .fontWeight(.semibold)
                                .foregroundColor(tx.amount < 0 ? .white : Color(red: 0.13, green: 0.77, blue: 0.37))
                        }
                        .padding(.vertical, 10)
                    }
                }
                .padding(22)
            }
        }
    }
}

#Preview { WalletView() }