import APIClient
import ComponentLibrary
import ComposableArchitecture
import SwiftUI
import Utilities

struct TimeSyncedComment: View {
    let comment: ClipComment
    let onCommentTap: () -> Void

    init(
        _ comment: ClipComment,
        onCommentTap: @escaping () -> Void
    ) {
        self.comment = comment
        self.onCommentTap = onCommentTap
    }

    public var body: some View {
        HStack(spacing: 8) {
            avatarImage
            contentText
        }
        .padding(8)
        .background(.ultraThinMaterial)
        .cornerRadius(8)
        .onTapGesture {
            onCommentTap()
        }
    }

    @ViewBuilder
    private var contentText: some View {
        Text(comment.content)
            .typographyV1(.init(
                name: "Caption 5",
                size: 12,
                style: .caption,
                weight: .neueMontrealMedium,
                kerning: 0.24,
                lineHeight: 16
            ).ppNeueMontrealBook())
            .foregroundColor(.SemanticV1.textPrimary)
            .lineLimit(2)
    }

    private var avatarImage: some View {
        RemoteImage(url: comment.userAvatarUrl, fallbackId: comment.userHandle)
            .frame(width: 20, height: 20)
            .clipShape(Circle())
    }
}