Navigation Widget View

import SwiftUI

struct NavigationWidgetView: View {
    // Simulated data
    let direction: Direction = .left
    let totalMiles: String = "24.8 mi"
    let distanceLeft: String = "167M"
    let eta: String = "12:45 PM"
    
    var body: some View {
        ZStack {
            // Background
            RoundedRectangle(cornerRadius: 20)
                .fill(Color.black)
            
            VStack(alignment: .leading, spacing: 16) {
                HStack(spacing: 16) {
                    // Arrow for next turn
                    Image(systemName: direction.systemImageName)
                        .resizable()
                        .scaledToFit()
                        .frame(width: 40, height: 40)
                        .foregroundColor(.gray)
                    
                    VStack(alignment: .leading) {
                        HStack{
                            Text(distanceLeft)
                                .font(.largeTitle).fontWeight(.medium)
                                .foregroundColor(.white)
                            
                            Spacer()
                            
                            Button(action: {
                                print("Button tapped")
                            }) {
                                Image(systemName: "point.topleft.filled.down.to.point.bottomright.curvepath")
                                    .foregroundColor(.white)
                                    .padding(6)
                                    .background(Circle().fill(Color.blue))
                            }
                        }
                        
                        Text("Hillview Rd")
                            .font(.subheadline)
                            .foregroundColor(.gray)
                        
                        Spacer()
                        
                        // Bottom row: ETA and Total Miles
                        HStack(alignment: .center,spacing: 20) {
                            VStack(alignment: .leading, spacing: 2) {
                                Text("ETA")
                                    .font(.caption)
                                    .foregroundColor(.gray)
                                    .fontWeight(.bold)
                                Text(eta)
                                    .font(.subheadline)
                                    .foregroundColor(.white)
                            }
                            
                            VStack(alignment: .leading, spacing: 2) {
                                Text("Distance")
                                    .font(.caption)
                                    .foregroundColor(.gray)
                                    .fontWeight(.bold)
                                Text(totalMiles)
                                    .font(.subheadline)
                                    .foregroundColor(.white)
                            }
                            
                            VStack(alignment: .leading, spacing: 2) {
                                Text("Remaining")
                                    .font(.caption)
                                    .foregroundColor(.gray)
                                    .fontWeight(.bold)
                                Text("15 min")
                                    .font(.subheadline)
                                    .foregroundColor(.white)
                            }
                            
                            Spacer()
                            
                        }
                    }
                }
            }
            .padding()
        }
        .frame(width: 350, height: 150) // Medium widget size approximation
    }
}

// MARK: - Direction enum
enum Direction {
    case left, right, straight
    
    var systemImageName: String {
        switch self {
        case .left: return "arrow.turn.up.left"
        case .right: return "arrow.turn.up.right"
        case .straight: return "arrow.up"
        }
    }
}