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

import SwiftUI
import Kingfisher

struct ContentListItemView: View {
    
    let item: GetAudioContentListItem
    
    var body: some View {
        VStack(spacing: 10) {
            HStack(spacing: 0) {
                ZStack(alignment: .topLeading) {
                    KFImage(URL(string: item.coverImageUrl))
                        .resizable()
                        .scaledToFill()
                        .frame(width: 66.7, height: 66.7, alignment: .top)
                        .clipped()
                        .cornerRadius(5.3)
                }
                
                VStack(alignment: .leading, spacing: 0) {
                    HStack(spacing: 8) {
                        Text(item.themeStr)
                            .font(.custom(Font.medium.rawValue, size: 8))
                            .foregroundColor(Color(hex: "3bac6a"))
                            .padding(2.6)
                            .background(Color(hex: "28312b"))
                            .cornerRadius(2.6)
                        
                        Text(item.duration!)
                            .font(.custom(Font.medium.rawValue, size: 8))
                            .foregroundColor(Color(hex: "777777"))
                            .padding(2.6)
                            .background(Color(hex: "222222"))
                            .cornerRadius(2.6)
                    }
                    
                    Text(item.title)
                        .font(.custom(Font.medium.rawValue, size: 12))
                        .foregroundColor(Color(hex: "d2d2d2"))
                        .padding(.top, 8)
                        .padding(.bottom, 10)
                    
                    HStack(spacing: 13.3) {
                        HStack(spacing: 6) {
                            Image("ic_heart_777")
                                .resizable()
                                .frame(width: 13.3, height: 13.3)
                            
                            Text("\(item.likeCount)")
                                .font(.custom(Font.medium.rawValue, size: 13.3))
                                .foregroundColor(Color(hex: "777777"))
                        }
                        
                        HStack(spacing: 6) {
                            Image("ic_message_square_777")
                                .resizable()
                                .frame(width: 13.3, height: 13.3)
                            
                            Text("\(item.commentCount)")
                                .font(.custom(Font.medium.rawValue, size: 13.3))
                                .foregroundColor(Color(hex: "777777"))
                        }
                    }
                }
                .padding(.leading, 10.7)
                .padding(.top, 8)
                .padding(.bottom, 12)
                
                Spacer()
                
                if item.price > 0 {
                    HStack(spacing: 8) {
                        Image("ic_can")
                            .resizable()
                            .frame(width: 17, height: 17)
                        
                        Text("\(item.price)")
                            .font(.custom(Font.medium.rawValue, size: 12))
                            .foregroundColor(Color(hex: "909090"))
                    }
                } else {
                    Text("무료")
                        .font(.custom(Font.medium.rawValue, size: 12))
                        .foregroundColor(Color(hex: "909090"))
                }
            }
            
            Rectangle()
                .frame(height: 0.5)
                .foregroundColor(Color(hex: "595959"))
        }
        .frame(maxWidth: .infinity)
    }
}

struct ContentListItemView_Previews: PreviewProvider {
    static var previews: some View {
        ContentListItemView(
            item: GetAudioContentListItem(
                contentId: 25,
                coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
                title: "폭우",
                price: 110,
                themeStr: "test",
                duration: "00:04:43",
                likeCount: 2,
                commentCount: 0,
                isAdult: false
            )
        )
    }
}