//
//  UserProfileSimilarCreatorView.swift
//  SodaLive
//
//  Created by klaus on 2023/08/11.
//

import SwiftUI
import Kingfisher

struct UserProfileSimilarCreatorView: View {
    
    let creators: [SimilarCreatorResponse]
    let onClickCreator: (Int) -> Void
    
    var body: some View {
        VStack(alignment: .leading, spacing: 26.7) {
            Text("함께 들으면 좋은 채널")
                .font(.custom(Font.bold.rawValue, size: 16.7))
                .foregroundColor(Color(hex: "eeeeee"))
            
            VStack(spacing: 10) {
                ForEach(0..<creators.count, id: \.self) {
                    let creator = creators[$0]
                    HStack(spacing: 13.3) {
                        KFImage(URL(string: creator.profileImage))
                            .resizable()
                            .scaledToFill()
                            .frame(width: 60, height: 60, alignment: .top)
                            .clipShape(Circle())
                        
                        VStack(alignment: .leading, spacing: 6.7) {
                            Text(creator.nickname)
                                .font(.custom(Font.medium.rawValue, size: 12))
                                .foregroundColor(Color(hex: "eeeeee"))
                            
                            Text(creator.tags.map { "#\($0)" }.joined(separator: " "))
                                .font(.custom(Font.medium.rawValue, size: 11))
                                .foregroundColor(Color(hex: "777777"))
                        }
                        .padding(.trailing, 13.3)
                        
                        Spacer()
                    }
                    .contentShape(Rectangle())
                    .onTapGesture {
                        onClickCreator(creator.userId)
                    }
                }
            }
        }
        .frame(width: screenSize().width - 26.7, alignment: .leading)
    }

}