import SwiftUI

struct MainContentVoiceOnOnlySection: View {
    let title: String
    let items: [OriginalSeriesResponse]
    let action: (() -> Void)?
    let onTapSeries: (Int) -> Void

    private let baseDeviceWidth: CGFloat = 402
    private let maxItemWidth: CGFloat = 163
    private let maxItemHeight: CGFloat = 230

    private var itemSize: CGSize {
        let scale = min(1, UIScreen.main.bounds.width / baseDeviceWidth)
        return CGSize(width: maxItemWidth * scale, height: maxItemHeight * scale)
    }

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

                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(alignment: .top, spacing: SodaSpacing.s14) {
                        ForEach(items) { item in
                            Button {
                                onTapSeries(item.seriesId)
                            } label: {
                                ZStack(alignment: .topLeading) {
                                    DownsampledKFImage(
                                        url: URL(string: item.coverImageUrl),
                                        size: itemSize
                                    )
                                    .background(Color.gray800)

                                    originalTag
                                }
                                .frame(width: itemSize.width, height: itemSize.height)
                                .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
                            }
                            .buttonStyle(.plain)
                        }
                    }
                    .padding(.horizontal, SodaSpacing.s20)
                }
            }
        }
    }

    private var originalTag: some View {
        HStack(spacing: SodaSpacing.s4) {
            Image("ic_series_original")
                .resizable()
                .scaledToFit()
                .frame(width: 14, height: 14)

            Image("img_new_only")
                .resizable()
                .scaledToFit()
                .frame(height: 14)
        }
        .padding(.horizontal, SodaSpacing.s8)
        .padding(.vertical, 5)
        .background(Color.gray900)
    }
}