import SwiftUI

struct WorkProfileView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(alignment: .leading, spacing: 24) {
                    Text("Work Profile")
                        .font(.largeTitle)
                        .bold()
                        .padding(.horizontal)

                    HorizontalCardListView(title: "My Experience", items: experienceItems)

                    HorizontalCardListView(title: "Skills", items: skillsItems)

                    Spacer()
                }
                .padding(.vertical)
            }
            .navigationTitle("")
            .navigationBarHidden(true)
        }
    }
}

struct HorizontalCardListView: View {
    let title: String
    let items: [CardItem]
    
    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Text(title)
                    .font(.title2)
                    .bold()
                Spacer()
                NavigationLink(destination: Text("View All")) {
                    Text("View All")
                        .foregroundColor(.gray)
                    
                }
            }
            .padding(.horizontal)
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 16) {
                    ForEach(items) { item in
                        CardView(item: item)
                            .padding(.vertical)
                    }
                }
                .padding(.horizontal)
            }
        }
    }
}

struct CardView: View {
    let item: CardItem
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            HStack {
                Image(systemName: item.iconName)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 24, height: 24)
                    .padding()
                    .background(Color(UIColor.systemGray5))
                    .clipShape(Circle())
                
                
                
                VStack(alignment: .leading) {
                    Text(item.title)
                        .font(.headline)
                    
                    Text(item.subtitle)
                        .font(.subheadline)
                        .foregroundColor(.gray)
                }
                .padding(.leading, 12)
            }
            
            HStack {
                Text(item.metaText1)
                    .font(.caption)
                    .foregroundColor(.black)
                    .bold()
                
                Spacer()
                
                Text(item.metaText2)
                    .font(.caption)
                    .foregroundColor(.black)
            }
        }
        .padding()
        .background(Color.white)
        .cornerRadius(12)
        .shadow(color: Color(UIColor.systemGray3), radius: 2, x: 0, y: 2)
        .frame(width: min(UIScreen.main.bounds.width * 0.75, 400))
    }
}

struct CardItem: Identifiable {
    let id = UUID()
    let iconName: String
    let title: String
    let subtitle: String
    let metaText1: String
    let metaText2: String
}

let experienceItems = [
    CardItem(iconName: "paintbrush", title: "Senior UI/UX Designer", subtitle: "Figma", metaText1: "Full Time", metaText2: "2019-2023"),
    CardItem(iconName: "paintbrush", title: "Mid-level Designer", subtitle: "GitHub", metaText1: "Full Time", metaText2: "2017-2019"),
    CardItem(iconName: "paintbrush", title: "Junior Designer", subtitle: "Twitter", metaText1: "Full Time", metaText2: "2015-2017")
]

let skillsItems = [
    CardItem(iconName: "chevron.left.slash.chevron.right", title: "TypeScript", subtitle: "8 endorsements", metaText1: "2 experiences", metaText2: "GitHub & Figma"),
    CardItem(iconName: "chevron.left.slash.chevron.right", title: "Git", subtitle: "3 endorsements", metaText1: "1 experience", metaText2: "GitHub")
]


#Preview {
    WorkProfileView()
}