import SwiftUI

struct VerificationView: View {
    
    @State var one: String = ""
    @State var two: String = ""
    @State var three: String = ""
    @State var four: String = ""
    @State var five: String = ""
    @State var six: String = ""
    
    
    var body: some View {
        VStack {
            VStack() {
                Text("Verification Code")
                    .font(.system(size: 24, weight: .semibold))
                    .padding(.bottom, 2)
                Text("Enter the code we sent to (509) 867-5309")
                    .font(.system(size: 16, weight: .regular))
                    .foregroundColor(Color.gray11)
                
            }
            
            Spacer()
                .frame(height:40)
            
            
            VStack {
                ZStack {
                    HStack {
                
                            TextField("", text: $one)
                                .padding()
                                .background(Color.gray3)
                                .foregroundColor(Color.black)
                                .frame(width: 50)
                                .cornerRadius(6)
                                .multilineTextAlignment(.center)
                                .keyboardType(.numberPad)
                                .overlay( /// apply a rounded border
                                    RoundedRectangle(cornerRadius: 6)
                                        .stroke(Color.gray7, lineWidth: 1)
                                )
                            
                            TextField("", text: $two)
                                .padding()
                                .background(Color.gray3)
                                .foregroundColor(Color.black)
                                .frame(width: 50)
                                .cornerRadius(6)
                                .multilineTextAlignment(.center)
                                .keyboardType(.numberPad)
                                .overlay( /// apply a rounded border
                                    RoundedRectangle(cornerRadius: 6)
                                        .stroke(Color.gray7, lineWidth: 1)
                                )
       
                            
                            TextField("", text: $three)
                                .padding()
                                .background(Color.gray3)
                                .foregroundColor(Color.black)
                                .frame(width: 50)
                                .cornerRadius(6)
                                .multilineTextAlignment(.center)
                                .keyboardType(.numberPad)
                                .overlay( /// apply a rounded border
                                    RoundedRectangle(cornerRadius: 6)
                                        .stroke(Color.gray7, lineWidth: 1)
                                )
    
                            
                            TextField("", text: $four)
                                .padding()
                                .background(Color.gray3)
                                .foregroundColor(Color.black)
                                .frame(width: 50)
                                .cornerRadius(6)
                                .multilineTextAlignment(.center)
                                .keyboardType(.numberPad)
                                .overlay( /// apply a rounded border
                                    RoundedRectangle(cornerRadius: 6)
                                        .stroke(Color.gray7, lineWidth: 1)
                                )
   
                            
                            TextField("", text: $five)
                                .padding()
                                .background(Color.gray3)
                                .foregroundColor(Color.black)
                                .frame(width: 50)
                                .cornerRadius(6)
                                .multilineTextAlignment(.center)
                                .keyboardType(.numberPad)
                                .overlay( /// apply a rounded border
                                    RoundedRectangle(cornerRadius: 6)
                                        .stroke(Color.gray7, lineWidth: 1)
                                )
                            
                            TextField("", text: $six)
                                .padding()
                                .background(Color.gray3)
                                .foregroundColor(Color.black)
                                .frame(width: 50)
                                .cornerRadius(6)
                                .multilineTextAlignment(.center)
                                .keyboardType(.numberPad)
                                .overlay( /// apply a rounded border
                                    RoundedRectangle(cornerRadius: 6)
                                        .stroke(Color.gray7, lineWidth: 1)
                                )
                            
                        

                    }
                            
                }
                            
            }
            
            Spacer()


            Button(
                action: {
                    // add action here
                },
                label: {
                    HStack{

                        Text("Next")
                            .bold()
                            .foregroundColor(Color.white)
                    }
                    .frame(maxWidth: .infinity, minHeight: 60)
                    .background(Color.black) /// make the background gray
                    .cornerRadius(30) /// make the background rounded
                    .overlay( /// apply a rounded border
                        RoundedRectangle(cornerRadius: 30)
                            .stroke(Color.gray6, lineWidth: 1)
                    )
                })
            
            Spacer()
                .frame(height: 15)
            
            
            // Legal Disclaimer
            Text("Resend in 5 sec")
                .multilineTextAlignment(.center)
                .foregroundColor(Color.gray11)
                .tint(Color.gray12)
                .padding(.top, 10)
                .font(.system(size: 15))
                .frame(width: 250)
        }
        .padding()
        .navigationBarBackButtonHidden(true)
    }
}

struct VerificationView_Previews: PreviewProvider {
    static var previews: some View {
        VerificationView()
    }
}