import SwiftUI

struct MainHomeLiveSection: View {
    let items: [HomeLiveItem]
    let onTapLive: (Int) -> Void

    var body: some View {
        if !items.isEmpty {
            ScrollView(.horizontal, showsIndicators: false) {
                LazyHStack(alignment: .top, spacing: SodaSpacing.s12) {
                    ForEach(items, id: \.self) { item in
                        MainHomeLiveItemView(item: item, onTapLive: onTapLive)
                    }
                }
                .padding(.horizontal, SodaSpacing.s20)
            }
        }
    }
}

private struct MainHomeLiveItemView: View {
    let item: HomeLiveItem
    let onTapLive: (Int) -> Void

    var body: some View {
        Button {
            onTapLive(item.roomId)
        } label: {
            VStack(alignment: .center, spacing: SodaSpacing.s6) {
                ZStack(alignment: .bottom) {
                    DownsampledKFImage(url: URL(string: item.creatorProfileImage), size: CGSize(width: 62, height: 62))
                        .background(Color.gray800)
                        .clipShape(Circle())
                        .padding(SodaSpacing.s4)
                        .overlay {
                            Circle()
                                .strokeBorder(Color.button, lineWidth: 3)
                        }

                    Image("img_live")
                        .resizable()
                        .frame(width: 50, height: 18)
                }

                Text(item.creatorNickname)
                    .appFont(.body4)
                    .foregroundColor(.white)
                    .lineLimit(1)
                    .truncationMode(.tail)
            }
            .frame(width: 70, height: 102, alignment: .top)
        }
        .buttonStyle(.plain)
    }
}

struct MainHomeLiveSection_Previews: PreviewProvider {
    private static let previewImageUrl = "https://placehold.co/500"

    static var previews: some View {
        Group {
            MainHomeLiveItemView(
                item: HomeLiveItem(roomId: 1, creatorNickname: "크리에이...", creatorProfileImage: previewImageUrl),
                onTapLive: { _ in }
            )
            .background(Color.black)
            .previewLayout(.fixed(width: 70, height: 102))
            .previewDisplayName("Live Item")

            MainHomeLiveSection(
                items: [
                    HomeLiveItem(roomId: 1, creatorNickname: "설린", creatorProfileImage: previewImageUrl),
                    HomeLiveItem(roomId: 2, creatorNickname: "크리에이터", creatorProfileImage: previewImageUrl)
                ],
                onTapLive: { _ in }
            )
            .padding(.vertical, SodaSpacing.s20)
            .background(Color.black)
            .previewLayout(.sizeThatFits)
            .previewDisplayName("Live Section")
        }
    }
}