import Ignite

struct Logo: HTML {
    private var barTitle: String
    private var underTitle: String
    
    init(barTitle: String = "", underTitle: String = "") {
        self.barTitle = barTitle
        self.underTitle = underTitle
    }
    
    var body: some HTML {
        
        // ── Logo ──────────────────────────────────────────────────────────────
        // Simplified Underground logo using ZStack and SwiftUI-like modifiers
        VStack {
            ZStack {
                // Red circle
                Text("")
                    .frame(width: 190, height: 190)
                    .background(.red)
                    .cornerRadius(95)
                    .border(.black, width: 1)
                
                // White circle
                Text("")
                    .frame(width: 110, height: 110)
                    .background(.white)
                    .cornerRadius(55)
                    .border(.black, width: 1)
                
                // Blue bar with "Hinnen"
                VStack {
                    Spacer()
                    Text(barTitle.uppercased())
                        .foregroundStyle(.white)
                        .font(.custom("Futura", size: 33))
                    Spacer()
                }
                .frame(width: 214, height: 40, alignment: .center)
                .background(.blue)
                .border(.black, width: 1)
                .horizontalAlignment(.center)
            }
            // "Underground" label beneath
            Text(underTitle.uppercased())
                .font(.custom("Futura", size: 25))
                .frame(width: 214, alignment: .top)
                .horizontalAlignment(.center)
        }
        .frame(width: 214)
    }
}