Order History View

struct OrderHistoryView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: 20) {
                    ForEach(orderHistoryData) { order in
                        OrderHistoryRow(order: order)
                    }
                }
                .padding(.vertical, 24)
            }
            .navigationTitle("Order History")
            .background(
                LinearGradient(gradient: Gradient(colors: [Color.blue.opacity(0.10), Color.purple.opacity(0.08)]), startPoint: .top, endPoint: .bottom)
                    .ignoresSafeArea()
            )
        }
    }
}

struct OrderHistory: Identifiable {
    let id = UUID()
    let orderNumber: String
    let date: String
    let status: String
    let total: String
    let items: [OrderItem]
}

struct OrderItem: Identifiable {
    let id = UUID()
    let name: String
    let icon: String // SF Symbol or image name
    let qty: Int
}

let orderHistoryData: [OrderHistory] = [
    .init(orderNumber: "#1001", date: "May 28, 2024", status: "Delivered", total: "$120.00", items: [
        .init(name: "Headphones", icon: "headphones", qty: 1),
        .init(name: "USB-C Cable", icon: "cable.connector", qty: 2)
    ]),
    .init(orderNumber: "#1000", date: "May 20, 2024", status: "Shipped", total: "$89.99", items: [
        .init(name: "Smartwatch", icon: "applewatch", qty: 1)
    ]),
    .init(orderNumber: "#0999", date: "May 10, 2024", status: "Cancelled", total: "$59.00", items: [
        .init(name: "Bluetooth Speaker", icon: "hifispeaker.fill", qty: 1)
    ])
]

struct OrderHistoryRow: View {
    let order: OrderHistory
    var statusColor: Color {
        switch order.status {
        case "Delivered": return .green
        case "Shipped": return .blue
        case "Cancelled": return .red
        default: return .gray
        }
    }
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            HStack {
                Text(order.orderNumber)
                    .font(.headline)
                Spacer()
                Text(order.status)
                    .font(.caption)
                    .fontWeight(.semibold)
                    .foregroundColor(.white)
                    .padding(.vertical, 4)
                    .padding(.horizontal, 10)
                    .background(statusColor)
                    .cornerRadius(8)
            }
            HStack {
                Text(order.date)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
                Spacer()
                Text(order.total)
                    .font(.headline)
            }
            // Items summary
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 16) {
                    ForEach(order.items) { item in
                        HStack(spacing: 6) {
                            ZStack {
                                RoundedRectangle(cornerRadius: 8, style: .continuous)
                                    .fill(Color(.systemGray6))
                                    .frame(width: 32, height: 32)
                                Image(systemName: item.icon)
                                    .font(.system(size: 18))
                                    .foregroundColor(.blue)
                            }
                            Text("\(item.qty)x")
                                .font(.caption)
                                .foregroundColor(.secondary)
                            Text(item.name)
                                .font(.caption)
                                .foregroundColor(.primary)
                        }
                        .padding(.vertical, 2)
                        .padding(.horizontal, 6)
                        .background(Color(.systemBackground).opacity(0.7))
                        .cornerRadius(10)
                    }
                }
            }
        }
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16, style: .continuous)
                .fill(Color(.systemBackground).opacity(0.7))
        )
        .padding(.horizontal)
    }
}