Shop Checkout

import SwiftUI

struct ShopCheckoutTemplate: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: 32) {
                    // Shipping Address
                    HStack {
                        VStack(alignment: .leading, spacing: 8) {
                            HStack {
                                Image(systemName: "house.fill")
                                    .foregroundColor(.blue)
                                Text("Shipping Address")
                                    .font(.headline)
                            }
                            Text("John Doe\n123 Main St\nSan Francisco, CA 94101")
                                .font(.subheadline)
                                .foregroundColor(.secondary)
                            Button(action: {}) {
                                Text("Change")
                                    .font(.caption)
                                    .foregroundColor(.blue)
                            }
                        }
                        .frame(maxWidth: .infinity, alignment: .leading)
                    }
                    .padding()
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .background(
                        RoundedRectangle(cornerRadius: 16, style: .continuous)
                            .fill(Color(.systemBackground).opacity(0.7))
                    )

                    // Payment Method
                    HStack {
                        VStack(alignment: .leading, spacing: 8) {
                            HStack {
                                Image(systemName: "creditcard.fill")
                                    .foregroundColor(.purple)
                                Text("Payment Method")
                                    .font(.headline)
                            }
                            HStack(spacing: 12) {
                                Image(systemName: "creditcard")
                                    .foregroundColor(.secondary)
                                Text("Visa **** 4242")
                                    .font(.subheadline)
                                    .foregroundColor(.secondary)
                            }
                            Button(action: {}) {
                                Text("Change")
                                    .font(.caption)
                                    .foregroundColor(.blue)
                            }
                        }
                        .frame(maxWidth: .infinity, alignment: .leading)
                    }
                    .padding()
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .background(
                        RoundedRectangle(cornerRadius: 16, style: .continuous)
                            .fill(Color(.systemBackground).opacity(0.7))
                    )

                    // Order Summary
                    VStack(alignment: .leading, spacing: 0) {
                        HStack {
                            Text("Order Summary")
                                .font(.headline)
                            Spacer()
                        }
                        .padding(.bottom, 8)
                        ForEach(checkoutItems) { item in
                            CheckoutItemRow(item: item)
                            Divider()
                        }
                        HStack {
                            Text("Subtotal")
                                .foregroundColor(.secondary)
                            Spacer()
                            Text("$210.00")
                        }
                        .padding(.top, 8)
                        HStack {
                            Text("Shipping")
                                .foregroundColor(.secondary)
                            Spacer()
                            Text("$10.00")
                        }
                        Divider()
                        HStack {
                            Text("Total")
                                .font(.headline)
                            Spacer()
                            Text("$220.00")
                                .font(.headline)
                        }
                    }
                    .padding()
                    .background(
                        RoundedRectangle(cornerRadius: 16, style: .continuous)
                            .fill(Color(.systemBackground).opacity(0.7))
                    )
                    .padding(.horizontal)

                    // Place Order Button
                    Button(action: {}) {
                        Text("Place Order")
                            .font(.headline)
                            .foregroundColor(.white)
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(Color.blue)
                            .cornerRadius(16)
                    }
                    .padding(.horizontal)
                }
                .padding(.vertical, 32)
            }
            .navigationTitle("Checkout")
            .background(
                LinearGradient(gradient: Gradient(colors: [Color.blue.opacity(0.10), Color.purple.opacity(0.08)]), startPoint: .top, endPoint: .bottom)
                    .ignoresSafeArea()
            )
        }
    }
}

// MARK: - Checkout Items
struct CheckoutItem: Identifiable {
    let id = UUID()
    let name: String
    let icon: String // SF Symbol or image name
    let qty: Int
    let price: Double
}

let checkoutItems: [CheckoutItem] = [
    .init(name: "Wireless Earbuds", icon: "earbuds", qty: 1, price: 150.0),
    .init(name: "Charging Cable", icon: "cable.connector", qty: 2, price: 30.0)
]

struct CheckoutItemRow: View {
    let item: CheckoutItem
    var body: some View {
        HStack(spacing: 12) {
            ZStack {
                RoundedRectangle(cornerRadius: 8, style: .continuous)
                    .fill(Color(.systemGray6))
                    .frame(width: 36, height: 36)
                Image(systemName: item.icon)
                    .font(.system(size: 20))
                    .foregroundColor(.blue)
            }
            VStack(alignment: .leading, spacing: 2) {
                Text(item.name)
                    .font(.subheadline)
                Text("\(item.qty)x")
                    .font(.caption)
                    .foregroundColor(.secondary)
            }
            Spacer()
            Text(String(format: "$%.2f", item.price * Double(item.qty)))
                .font(.subheadline)
        }
        .padding(.vertical, 4)
    }
}