//
//  ColonView.swift
//  TheNoiseClock
//
//  Created by Matt Bruce on 9/11/25.
//

import SwiftUI

/// Component for displaying colon separator (two dots in horizontal or vertical arrangement)
struct ColonView: View {
    let dotDiameter: CGFloat
    let spacing: CGFloat
    let opacity: Double
    let digitColor: Color
    let glowIntensity: Double
    let fontWeight: Font.Weight
    let isHorizontal: Bool
    
    var body: some View {
        let clamped = ColorUtils.clampOpacity(opacity)
        
        Group {
            if isHorizontal {
                HStack(spacing: spacing) {
                    DotCircle(size: dotDiameter, opacity: clamped, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
                    DotCircle(size: dotDiameter, opacity: clamped, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
                }
            } else {
                VStack(spacing: spacing) {
                    DotCircle(size: dotDiameter, opacity: clamped, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
                    DotCircle(size: dotDiameter, opacity: clamped, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight)
                }
            }
        }
        .fixedSize(horizontal: true, vertical: true)
        .accessibilityHidden(true)
        .phaseAnimator([0, 1]) { content, phase in
            content
                .opacity(phase == 1 ? 1.0 : 0.6)
        } animation: { _ in
            .easeInOut(duration: 1.0)
        }
    }
}

// MARK: - Preview
#Preview("Horizontal Colon") {
    ColonView(
        dotDiameter: 12,
        spacing: 8,
        opacity: 1.0,
        digitColor: .white,
        glowIntensity: 0.3,
        fontWeight: .regular,
        isHorizontal: true
    )
    .background(Color.black)
}

#Preview("Vertical Colon") {
    ColonView(
        dotDiameter: 12,
        spacing: 8,
        opacity: 1.0,
        digitColor: .white,
        glowIntensity: 0.3,
        fontWeight: .regular,
        isHorizontal: false
    )
    .background(Color.black)
}