mana-swift-ui/Sources/ManaComponentsUI/ManaSettingsSection.swift

import ManaTokens
import SwiftUI

/// Geteilter Settings-Abschnitt — SwiftUI-Pendant zur Compose-`ManaSettingsSection`
/// (mana-kotlin-ui). Rendert eine native, gruppierte `Section` mit Icon-Header
/// (`Label`) + Footer. So sehen Settings-Screens auf iOS (native insetGrouped-Form)
/// und Android (Card) **strukturell + semantisch gleich** aus — gleiche API, je
/// native Optik. Muss in einer `Form`/`List` stehen.
///
/// ```swift
/// Form {
///     ManaSettingsSection(icon: "waveform", title: "Transkription",
///                         footer: "Wo deine Aufnahmen umgewandelt werden.") {
///         Picker(…) { … }
///     }
/// }
/// ```
public struct ManaSettingsSection<Content: View, Footer: View>: View {
    private let icon: String
    private let title: String
    private let content: Content
    private let footer: Footer

    public init(
        icon: String,
        title: String,
        @ViewBuilder content: () -> Content,
        @ViewBuilder footer: () -> Footer
    ) {
        self.icon = icon
        self.title = title
        self.content = content()
        self.footer = footer()
    }

    public var body: some View {
        Section {
            content
        } header: {
            Label(title, systemImage: icon)
        } footer: {
            footer
        }
    }
}

public extension ManaSettingsSection where Footer == Text {
    /// Bequem-Init mit einfachem Text-Footer (häufigster Fall).
    init(icon: String, title: String, footer: String, @ViewBuilder content: () -> Content) {
        self.init(icon: icon, title: title, content: content) { Text(footer) }
    }
}

public extension ManaSettingsSection where Footer == EmptyView {
    /// Bequem-Init ohne Footer.
    init(icon: String, title: String, @ViewBuilder content: () -> Content) {
        self.init(icon: icon, title: title, content: content) { EmptyView() }
    }
}

/// Eine auswählbare Zeile in einer [ManaSettingsSection] — Leading-Symbol + Titel/
/// Untertitel + Auswahl-Häkchen. Pendant zur Compose-`ManaSettingsRow`. (Wo ein
/// natives `Picker` besser passt, darf es weiter genutzt werden — die Section-Klammer
/// ist der geteilte Vertrag, die Zeile die Kür.)
public struct ManaSettingsRow: View {
    @Environment(\.manaTheme) private var theme

    private let icon: String
    private let title: String
    private let subtitle: String?
    private let selected: Bool
    private let action: () -> Void

    public init(
        icon: String,
        title: String,
        subtitle: String? = nil,
        selected: Bool,
        action: @escaping () -> Void
    ) {
        self.icon = icon
        self.title = title
        self.subtitle = subtitle
        self.selected = selected
        self.action = action
    }

    public var body: some View {
        Button(action: action) {
            HStack(spacing: 12) {
                Image(systemName: icon)
                    .font(.body)
                    .foregroundStyle(selected ? theme.colors.primary : Color.secondary)
                    .frame(width: 28)
                VStack(alignment: .leading, spacing: 2) {
                    Text(title)
                    if let subtitle {
                        Text(subtitle)
                            .font(.caption)
                            .foregroundStyle(.secondary)
                    }
                }
                Spacer()
                if selected {
                    Image(systemName: "checkmark")
                        .font(.body.weight(.semibold))
                        .foregroundStyle(theme.colors.primary)
                }
            }
            .contentShape(Rectangle())
        }
        .buttonStyle(.plain)
    }
}