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

import SwiftUI
import Kingfisher

struct UserProfileDonationView: View {
    
    let userId: Int
    let donationRankingResponse: [UserDonationRankingResponse]
    let crowns = ["img_rank_1", "img_rank_2", "img_rank_3"]
    
    var body: some View {
        VStack(alignment: .leading, spacing: 14) {
            HStack(spacing: 0) {
                Text("후원랭킹")
                    .appFont(size: 26, weight: .bold)
                    .foregroundColor(Color.white)
                
                Spacer()
                
                Text("전체보기")
                    .appFont(size: 14, weight: .light)
                    .foregroundColor(Color(hex: "78909C"))
                    .onTapGesture {
                        AppState.shared.setAppStep(step: .userProfileDonationAll(userId: userId))
                    }
            }
            .padding(.horizontal, 24)
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 13.3) {
                    ForEach(0..<donationRankingResponse.count, id: \.self) { index in
                        let item = donationRankingResponse[index]
                        VStack(spacing: 6.7) {
                            ZStack(alignment: .center) {
                                KFImage(URL(string: item.profileImage))
                                    .cancelOnDisappear(true)
                                    .downsampling(
                                        size: CGSize(
                                            width: 70,
                                            height: 70
                                        )
                                    )
                                    .resizable()
                                    .scaledToFill()
                                    .frame(width: 70, height: 70, alignment: .top)
                                    .clipShape(Circle())
                                
                                if index < 3 {
                                    Image(crowns[index])
                                        .resizable()
                                        .frame(width: 90, height: 87.5)
                                }
                            }
                            .frame(width: 90, height: 87.5)
                            
                            Text(item.nickname)
                                .appFont(size: 12, weight: .medium)
                                .foregroundColor(.grayee)
                                .frame(width: 63)
                                .lineLimit(1)
                        }
                    }
                }
                .padding(.horizontal, 24)
            }
        }
    }
}