import SwiftUI

struct Coin: Identifiable { let id = UUID(); let sym: String; let name: String; let price: Double; let chg: Double }

struct CryptoView: View {
    let coins: [Coin] = [
        .init(sym: "BTC", name: "Bitcoin", price: 67482, chg: 2.4),
        .init(sym: "ETH", name: "Ethereum", price: 3521, chg: -1.2),
        .init(sym: "SOL", name: "Solana", price: 168, chg: 5.8),
        .init(sym: "ADA", name: "Cardano", price: 0.59, chg: 0.9),
        .init(sym: "DOT", name: "Polkadot", price: 7.21, chg: -3.1)
    ]

    var body: some View {
        ZStack {
            Color(red: 0.04, green: 0.04, blue: 0.05).ignoresSafeArea()
            ScrollView {
                VStack(alignment: .leading, spacing: 6) {
                    Text("PORTFOLIO").font(.caption).bold().foregroundColor(Color(red: 0.97, green: 0.58, blue: 0.1))
                    Text("$48,209.18").font(.system(size: 40, weight: .heavy)).foregroundColor(.white)
                    Text("▲ $1,204.55 (2.6%) today").foregroundColor(Color(red: 0.13, green: 0.77, blue: 0.37))

                    Text("Holdings").font(.title3).bold().foregroundColor(.white).padding(.top, 24)
                    ForEach(coins) { c in
                        HStack {
                            VStack(alignment: .leading, spacing: 2) {
                                Text(c.name).fontWeight(.semibold).foregroundColor(.white)
                                Text(c.sym).font(.footnote).foregroundColor(.gray)
                            }
                            Spacer()
                            VStack(alignment: .trailing, spacing: 2) {
                                Text("$\(c.price, specifier: "%.2f")").fontWeight(.semibold).foregroundColor(.white)
                                Text("\(c.chg >= 0 ? "+" : "")\(c.chg, specifier: "%.1f")%")
                                    .font(.footnote)
                                    .foregroundColor(c.chg < 0 ? Color(red: 1, green: 0.36, blue: 0.36) : Color(red: 0.13, green: 0.77, blue: 0.37))
                            }
                        }
                        .padding(.vertical, 12)
                    }
                }
                .padding(22)
            }
        }
    }
}

#Preview { CryptoView() }