// The scaffold every settings page shares: a scrolling column with a title, a
// one-line lede, and consistent margins.
//
// This existed eleven times as copy-pasted Flickable/Column/x:34/y:30 blocks,
// which is a large part of why several pages settled for read-only text instead
// of real controls -- adding a page was expensive enough that the cheap thing
// won. Pages are now just their content:
//
//   SettingsPage {
//       title: "Appearance"
//       lede: "Tokyo Night Moon, tuned for clarity and quiet motion."
//
//       SettingsCard { title: "Windows"; ToggleRow { setting: "blurEnabled" } }
//   }

import QtQuick
import qs.config

Item {
    id: root

    default property alias content: column.data

    property string title: ""
    property string lede: ""

    // Anything that should sit above the title and stay put while the rest
    // scrolls -- the Appearance page pins its live preview here.
    property Component header: null

    Flickable {
        anchors.fill: parent
        clip: true
        contentWidth: width
        contentHeight: layout.implicitHeight + 64
        boundsBehavior: Flickable.StopAtBounds

        Column {
            id: layout

            width: parent.width - 68
            x: 34
            y: 30
            spacing: 16

            Loader {
                width: parent.width
                active: root.header !== null
                sourceComponent: root.header
            }

            Text {
                width: parent.width
                visible: root.title !== ""
                text: root.title
                color: Theme.fg
                font.family: Theme.fontFamily
                font.pixelSize: 27
                font.weight: Font.DemiBold
            }

            Text {
                width: parent.width
                visible: root.lede !== ""
                text: root.lede
                color: Theme.fgDim
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSize
                wrapMode: Text.WordWrap
                bottomPadding: 6
            }

            Column {
                id: column
                width: parent.width
                spacing: 16
            }
        }
    }
}