//
//  OnboardingPageView.swift
//  TheNoiseClock
//
//  Reusable onboarding page component with icon, title, and description.
//

import SwiftUI
import Bedrock

/// A single onboarding page with icon, title, and description
struct OnboardingPageView: View {
    
    // MARK: - Properties
    
    let icon: String
    let iconColor: Color
    let title: String
    let description: String
    
    // MARK: - Body
    
    var body: some View {
        VStack(spacing: Design.Spacing.xxLarge) {
            Spacer()
            
            // Icon
            SymbolIcon(icon, size: .hero, color: iconColor, weight: .medium)
                .padding(.bottom, Design.Spacing.medium)
            
            // Title
            Text(title)
                .typography(.heroBold)
                .foregroundStyle(AppTextColors.primary)
                .multilineTextAlignment(.center)
            
            // Description
            Text(description)
                .typography(.body)
                .foregroundStyle(AppTextColors.secondary)
                .multilineTextAlignment(.center)
                .padding(.horizontal, Design.Spacing.xxLarge)
            
            Spacer()
            Spacer()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

// MARK: - Preview

#Preview {
    OnboardingPageView(
        icon: "clock.fill",
        iconColor: AppAccent.primary,
        title: "Beautiful Clock Display",
        description: "A stunning full-screen digital clock with customizable fonts, colors, and animations."
    )
    .background(AppSurface.primary)
    .preferredColorScheme(.dark)
}
