import SwiftUI
import Bedrock

/// Preview shown while dragging a field
struct FieldRowPreview: View {
    let field: AddedContactField
    let themeColor: Color

    var body: some View {
        HStack(spacing: Design.Spacing.medium) {
            Circle()
                .fill(themeColor)
                .frame(width: Design.CardSize.avatarSize, height: Design.CardSize.avatarSize)
                .overlay(
                    field.fieldType.iconImage()
                        .typography(.title3)
                        .foregroundStyle(.white)
                )

            VStack(alignment: .leading, spacing: Design.Spacing.xxSmall) {
                Text(field.value.isEmpty ? field.fieldType.displayName : field.shortDisplayValue)
                    .typography(.subheading)
                    .foregroundStyle(Color.Text.primary)
                    .lineLimit(1)

                if !field.title.isEmpty {
                    Text(field.title)
                        .typography(.caption)
                        .foregroundStyle(Color.Text.secondary)
                        .lineLimit(1)
                }
            }
        }
        .padding(Design.Spacing.medium)
        .background(Color.AppBackground.elevated)
        .clipShape(.rect(cornerRadius: Design.CornerRadius.medium))
        .shadow(radius: Design.Shadow.radiusMedium)
    }
}
