//
//  OverlaySection.swift
//  TheNoiseClock
//
//  Created by Matt Bruce on 9/7/25.
//

import SwiftUI
import Bedrock

struct OverlaySection: View {
    @Binding var style: ClockStyle
    
    private let dateFormats = Date.availableDateFormats()
    
    var body: some View {
        VStack(alignment: .leading, spacing: Design.Spacing.small) {
            SettingsSectionHeader(
                title: "Overlays",
                systemImage: "rectangle.on.rectangle.angled",
                accentColor: AppAccent.primary
            )

            SettingsCard(backgroundColor: AppSurface.card, borderColor: AppBorder.subtle) {
                SettingsSlider(
                    title: "Overlay Opacity",
                    subtitle: "Adjust battery and date visibility",
                    value: $style.overlayOpacity,
                    in: 0.0...1.0,
                    step: 0.01,
                    format: SliderFormat.percentage,
                    accentColor: AppAccent.primary
                )

                SettingsToggle(
                    title: "Battery Level",
                    subtitle: "Show battery percentage",
                    isOn: $style.showBattery,
                    accentColor: AppAccent.primary
                )

                SettingsToggle(
                    title: "Date",
                    subtitle: "Display the current date",
                    isOn: $style.showDate,
                    accentColor: AppAccent.primary
                )

                if style.showDate {
                    VStack(alignment: .leading, spacing: Design.Spacing.xxSmall) {
                        Text("Date Format")
                            .font(.subheadline.weight(.medium))
                            .foregroundStyle(AppTextColors.primary)

                        Picker("Date Format", selection: $style.dateFormat) {
                            ForEach(dateFormats, id: \.1) { format in
                                Text(format.0).tag(format.1)
                            }
                        }
                        .pickerStyle(.menu)
                    }
                }
            }
        }
    }
}
