import SwiftUI
import KeyboardShortcuts

struct DictionarySettingsPanel: View {
    let onDismiss: () -> Void

    var body: some View {
        VStack(spacing: 0) {
            // Header
            HStack(spacing: ProatSpacing.s) {
                Text("Woordenboekinstellingen")
                    .font(ProatFont.sectie)
                    .foregroundColor(.proatText1)

                Spacer()

                Button(action: onDismiss) {
                    Image(systemName: "xmark")
                        .font(.system(size: 14, weight: .medium))
                        .foregroundColor(.proatText2)
                        .padding(6)
                        .background(Color.proatBgSunken)
                        .clipShape(Circle())
                }
                .buttonStyle(.plain)
                .help("Sluiten")
            }
            .padding(.horizontal, ProatSpacing.l)
            .padding(.vertical, ProatSpacing.m)
            .background(Color.proatBgRaised)
            .overlay(
                Divider().overlay(Color.proatBorder), alignment: .bottom
            )

            // Content
            Form {
                Section {
                    LabeledContent("Snel toevoegen aan woordenboek") {
                        KeyboardShortcuts.Recorder(for: .quickAddToDictionary)
                            .controlSize(.small)
                    }
                } header: {
                    Text("Sneltoetsen")
                }

            }
            .formStyle(.grouped)
            .scrollContentBackground(.hidden)
        }
    }
}
