import SwiftUI

struct UserProfileChannelDonationView: View {
    let creatorId: Int
    let donationItems: [GetChannelDonationListItem]
    let onTapDonationButton: () -> Void

    var body: some View {
        VStack(alignment: .leading, spacing: 14) {
            HStack(spacing: 0) {
                Text(I18n.MemberChannel.channelDonationHeader)
                    .appFont(size: 26, weight: .bold)
                    .foregroundColor(.white)

                Spacer()

                if !donationItems.isEmpty {
                    Text(I18n.Common.viewAll)
                        .appFont(size: 14, weight: .light)
                        .foregroundColor(Color(hex: "78909C"))
                        .onTapGesture {
                            AppState.shared.setAppStep(step: .channelDonationAll(creatorId: creatorId))
                        }
                }
            }
            .padding(.horizontal, 24)

            if donationItems.isEmpty {
                Text(I18n.MemberChannel.channelDonationEmpty)
                    .appFont(size: 16, weight: .regular)
                    .foregroundColor(Color(hex: "CFD8DC"))
                    .padding(.horizontal, 24)
            } else {
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(alignment: .top, spacing: 14) {
                        ForEach(0..<donationItems.count, id: \.self) { index in
                            let item = donationItems[index]

                            ChannelDonationItemView(
                                item: item,
                                previewLimit: 30,
                                isShowFullMessageOnTap: false
                            )
                            .frame(width: screenSize().width - 104)
                        }
                    }
                    .padding(.horizontal, 24)
                }
            }

            HStack(spacing: 6.7) {
                Image("ic_donation_white")
                    .resizable()
                    .frame(width: 20, height: 20)

                Text(I18n.MemberChannel.channelDonationButton)
                    .appFont(size: 16, weight: .bold)
                    .foregroundColor(.white)
            }
            .frame(maxWidth: .infinity)
            .padding(.vertical, 16)
            .background(Color(hex: "525252"))
            .cornerRadius(16)
            .padding(.horizontal, 24)
            .onTapGesture {
                onTapDonationButton()
            }
        }
    }
}