//
//  HomeWeeklyChartItemView.swift
//  SodaLive
//
//  Created by klaus on 7/12/25.
//

import SwiftUI
import Kingfisher

struct HomeWeeklyChartItemView: View {
    
    let rank: Int
    let content: GetAudioContentRankingItem
    let onClickItem: (Int) -> Void
    
    var body: some View {
        HStack(spacing: 16) {
            Text("\(rank)")
                .font(.custom(Font.preBold.rawValue, size: 16.7))
                .foregroundColor(Color(hex: "B5E7FA"))
            
            KFImage(URL(string: content.coverImageUrl))
                .cancelOnDisappear(true)
                .resizable()
                .frame(width: 60, height: 60)
                .cornerRadius(12)
            
            VStack(alignment: .leading, spacing: 6) {
                Text(content.title)
                    .lineLimit(1)
                    .font(.custom(Font.preRegular.rawValue, size: 18))
                    .foregroundColor(.white)
                
                Text(content.creatorNickname)
                    .font(.custom(Font.preRegular.rawValue, size: 14))
                    .foregroundColor(Color(hex: "78909C"))
            }
        }
        .frame(width: 180, alignment: .leading)
        .contentShape(Rectangle())
        .onTapGesture { onClickItem(content.contentId) }
    }
}

#Preview {
    HomeWeeklyChartItemView(
        rank: 10,
        content: GetAudioContentRankingItem(
            contentId: 1,
            title: "안녕하세요 오늘은 커버곡을 들려드릴께요....안녕하세요 오늘은 커버곡을 들려드릴께요....",
            coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
            themeStr: "커버곡",
            price: 100,
            duration: "00:30:20",
            creatorId: 1,
            creatorNickname: "유저1",
            isPointAvailable: false,
            creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png"
        ),
        onClickItem: { _ in }
    )
}