import SwiftUI

struct MainContentRecommendedAudioGridSection: View {
    let title: String
    let items: [AudioCardResponse]
    let onTapContent: (Int) -> Void

    private let columns = [
        GridItem(.flexible(), spacing: SodaSpacing.s14),
        GridItem(.flexible(), spacing: SodaSpacing.s14)
    ]

    var body: some View {
        if !items.isEmpty {
            VStack(alignment: .leading, spacing: SodaSpacing.s12) {
                SectionTitle(title: title)

                LazyVGrid(columns: columns, alignment: .leading, spacing: SodaSpacing.s20) {
                    ForEach(items) { item in
                        Button {
                            onTapContent(item.audioContentId)
                        } label: {
                            GeometryReader { proxy in
                                let width = proxy.size.width

                                AudioContentThumbnailCard(
                                    item: AudioContentThumbnailCardItem(audioCard: item),
                                    width: width
                                )
                            }
                            .aspectRatio(0.78, contentMode: .fit)
                        }
                        .buttonStyle(.plain)
                    }
                }
                .padding(.horizontal, SodaSpacing.s20)
            }
        }
    }
}