import SwiftUI

struct UGreenCompatibilityBadge: View {
    var selectedProtocol: NASProtocol = .smb

    private var dotColor: Color {
        selectedProtocol == .smb ? Color(hex: "#00B388") : AppTheme.inkQuaternary
    }

    var body: some View {
        HStack(spacing: 8) {
            // Status dot + UGreen NAS label
            HStack(spacing: 4) {
                Circle()
                    .fill(dotColor)
                    .frame(width: 6, height: 6)
                    .animation(.spring(response: 0.25, dampingFraction: 0.8), value: selectedProtocol)
                Text("UGreen NAS")
                    .font(.system(size: 11, weight: .semibold))
                    .foregroundStyle(dotColor)
                    .animation(.spring(response: 0.25, dampingFraction: 0.8), value: selectedProtocol)
            }

            // Separator
            Rectangle()
                .fill(AppTheme.inkQuaternary)
                .frame(width: 0.5, height: 11)

            // Active protocol label
            Text(selectedProtocol.rawValue)
                .font(.system(size: 11, weight: .medium))
                .foregroundStyle(selectedProtocol == .smb ? dotColor : AppTheme.inkTertiary)
                .contentTransition(.identity)
        }
        .padding(.horizontal, 12)
        .padding(.vertical, 6)
        .background(AppTheme.surfaceSunken)
        .clipShape(Capsule(style: .continuous))
    }
}