import SwiftUI

struct NotificationsView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach((1...10), id: \.self) { _ in
                    
                    // Example Notification
                    HStack {
                        Circle()
                            .frame(width:10)
                            .foregroundColor(.amber10)
                        ZStack {
                            Circle()
                                .frame(width: 50, height: 50)
                                .foregroundColor(.olive12)
                            Text("TSLA")
                                .font(.system(size: 12, weight: .bold))
                                .foregroundColor(.white)
                        }
                        VStack(alignment: .leading) {
                            HStack {
                                Text("Tesla")
                                    .font(.system(size: 16, weight: .semibold))
                                    .lineLimit(1)
                                    .truncationMode(.tail)
                                    .padding(.bottom,1)
                                Spacer()
                                Text("1h")
                                    .font(.system(size: 14, weight: .semibold))
                            }
                            
                            Text("📣 Shareholder Q&A for Q3 2023 Earnings")
                                .font(.system(size: 14, weight: .regular))
                                .foregroundColor(.gray11)
                                .lineLimit(1)
                                .truncationMode(.tail)
                        }
                        Spacer()
                        Image(systemName: "chevron.right")
                            .foregroundColor(.gray6)
                    }
                    .listRowInsets(EdgeInsets())
                    .padding(.vertical,16)
                    
                    // Example Notification #2
                    HStack {
                        Circle()
                            .frame(width:10)
                            .foregroundColor(.amber10)
                        ZStack {
                            Circle()
                                .frame(width: 50, height: 50)
                                .foregroundColor(.olive12)
                            Text("PLTR")
                                .font(.system(size: 12, weight: .bold))
                                .foregroundColor(.white)
                        }
                        VStack(alignment: .leading) {
                            HStack {
                                Text("Palantir Technologies")
                                    .font(.system(size: 16, weight: .semibold))
                                    .lineLimit(1)
                                    .truncationMode(.tail)
                                    .padding(.bottom,1)
                                Spacer()
                                Text("1h")
                                    .font(.system(size: 14, weight: .semibold))
                            }
                            
                            Text("Yeah! 🎊 Your order to buy 19.3829 shares")
                                .font(.system(size: 14, weight: .regular))
                                .foregroundColor(.gray11)
                                .lineLimit(1)
                                .truncationMode(.tail)
                        }
                        Spacer()
                        Image(systemName: "chevron.right")
                            .foregroundColor(.gray6)
                    }
                    .listRowInsets(EdgeInsets())
                    .padding(.vertical,16)
                    
                    // Example Notification #3
                    HStack {
                        Circle()
                            .frame(width:10)
                            .foregroundColor(.amber10)
                        ZStack {
                            Circle()
                                .frame(width: 50, height: 50)
                                .foregroundColor(.olive12)
                            Text("COIN")
                                .font(.system(size: 12, weight: .bold))
                                .foregroundColor(.white)
                        }
                        VStack(alignment: .leading) {
                            HStack {
                                Text("Coinbase")
                                    .font(.system(size: 16, weight: .semibold))
                                    .lineLimit(1)
                                    .truncationMode(.tail)
                                    .padding(.bottom,1)
                                Spacer()
                                Text("1h")
                                    .font(.system(size: 14, weight: .semibold))
                            }
                            
                            Text("Done! ✨ Your order to sell 5.293 shares")
                                .font(.system(size: 14, weight: .regular))
                                .foregroundColor(.gray11)
                                .lineLimit(1)
                                .truncationMode(.tail)
                        }
                        Spacer()
                        Image(systemName: "chevron.right")
                            .foregroundColor(.gray6)
                    }
                    .listRowInsets(EdgeInsets())
                    .padding(.vertical,16)
                    
                }
            }
            .navigationTitle("Notifications")
            .scrollContentBackground(.hidden)
        }
    }
}

struct NotificationsView_Previews: PreviewProvider {
    static var previews: some View {
        NotificationsView()
    }
}