import SwiftUI

struct SideMenuView: View {
    @Binding var isPresented: Bool
    
    // Adjustable paddings
    private let topPadding: CGFloat = 66
    private let bottomPadding: CGFloat = 34

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            ScrollView {
                VStack(alignment: .leading, spacing: 0) { // Parent VStack
                    // Header
                    VStack(alignment: .leading) {
                        Image(systemName: "person.circle.fill")
                            .resizable()
                            .frame(width: 60, height: 60)
                            .foregroundColor(.gray)
                        Text("Your Name")
                            .font(.title3).bold()
                        Text("@yourusername")
                            .font(.footnote)
                            .foregroundColor(.secondary)
                    }
                    .padding(.horizontal, 20)
                    .padding(.top, topPadding)
                    .padding(.bottom, 20)
                    
                    
                    
                    // Menu Items
                    VStack(alignment: .leading, spacing: 20) {
                        // Section 1
                        VStack(alignment: .leading, spacing: 7) {
                            SideMenuButton(icon: "person.2.fill", title: "People You May Like", action: {})
                            SideMenuButton(icon: "star.fill", title: "Fun Fest", action: {})
                            SideMenuButton(icon: "lightbulb.fill", title: "Creator Center", action: {})
                        }

                        Divider()

                        // Section 2
                        VStack(alignment: .leading, spacing: 7) {
                            Text("CATEGORY").font(.caption2).foregroundColor(.secondary)
                            SideMenuButton(icon: "doc.text", title: "Drafts", action: {})
                            SideMenuButton(icon: "bubble.left", title: "My Comments", action: {})
                            SideMenuButton(icon: "clock", title: "History", action: {})
                            SideMenuButton(icon: "arrow.down.circle", title: "My Downloads", action: {})
                        }

                        Divider()

                        // Section 3
                        VStack(alignment: .leading, spacing: 7) {
                            Text("SERVICES").font(.caption2).foregroundColor(.secondary)
                            SideMenuButton(icon: "shippingbox", title: "Orders", action: {})
                            SideMenuButton(icon: "cart", title: "Cart", action: {})
                            SideMenuButton(icon: "wallet.pass", title: "Wallet", action: {})
                        }
                        
                        Divider()
                        
                        // Section 4
                        VStack(alignment: .leading, spacing: 15) {
                            SideMenuButton(icon: "square.grid.2x2", title: "Applets", action: {})
                        }
                    }
                    .padding()
                }
                .frame(maxWidth: .infinity, alignment: .leading) // Align to the left
            }

            Spacer()

            // Footer
            HStack(spacing: 20) {
                Spacer()
                SideMenuFooterButton(icon: "qrcode.viewfinder", title: "Scan", action: {})
                SideMenuFooterButton(icon: "questionmark.circle", title: "Help Center", action: {})
                SideMenuFooterButton(icon: "gear", title: "Settings", action: {})
                Spacer()
            }
            .padding()
            .padding(.bottom, bottomPadding)
        }
        .background(Color(UIColor.systemBackground))
    }
}

// Helper Views for buttons
struct SideMenuButton: View {
    let icon: String
    let title: String
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            HStack(spacing: 15) {
                Image(systemName: icon)
                    .font(.title3)
                    .frame(width: 30)
                Text(title)
                    .font(.subheadline)
            }
            .foregroundColor(.primary)
            .padding(.vertical, 8)
        }
    }
}

struct SideMenuFooterButton: View {
    let icon: String
    let title: String
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            VStack {
                Image(systemName: icon)
                    .font(.title2)
                Text(title)
                    .font(.caption2)
            }
            .foregroundColor(.primary)
        }
    }
}