SwiftUI Airplane Challenge

AirplaneChallenge.swift

import SwiftUI

/**
 Here's the challenge:
 - The Airplane should usually be *centered in the cell*, so they are underneath each other in multiple cells.
 - No city should overlap the the airplane. If so the airplane should move to the left or the right.
 - If the space for the airplane is too small, it should not appear.
 
 I know in UIKit this can easily be done with a handful of AutoLayout constraints and priorities.
 But what is the way to do this in SwiftUI?
 */

struct CityPlaneView: View {
    
    let departureCity: String
    let arrivalCity: String
    
    var body: some View {
        HStack {
            Text(departureCity)
            Spacer()
            Image(systemName: "airplane")
            Spacer()
            Text(arrivalCity)
        }
        .font(.title)
    }
}

struct CityPlaneView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            ScrollView {
            CityPlaneView(departureCity: "Berlin", arrivalCity: "Rio de Janeiro")
                .padding()
                .background(Color.secondaryGroupedBackground)
                .cornerRadius(8)
                .padding()
            }
            .navigationTitle("Airplane Challenge")
            .background(Color.groupedBackground.ignoresSafeArea())
        }
    }
}