// Eyebrow, title, actions, rule — the same opening every page uses.
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

import ".."

ColumnLayout {
    property string eyebrow: ""
    property string title: ""
    property string caption: ""
    default property alias actions: actionRow.data

    Layout.fillWidth: true
    spacing: 10

    RowLayout {
        Layout.fillWidth: true
        spacing: 16

        ColumnLayout {
            Layout.fillWidth: true
            spacing: 2
            Label {
                visible: eyebrow !== ""
                text: eyebrow.toUpperCase()
                color: Theme.muted
                font.pixelSize: 10
                font.letterSpacing: 1.3
                font.weight: Font.DemiBold
                font.family: Theme.sansFamily
            }
            Label {
                text: title
                color: Theme.ink
                font.pixelSize: 27
                font.family: Theme.displayFamily
                font.letterSpacing: -0.6
            }
            Label {
                visible: caption !== ""
                text: caption
                color: Theme.muted
                font.pixelSize: 13
                font.family: Theme.sansFamily
                Layout.fillWidth: true
                wrapMode: Text.WordWrap
            }
        }

        RowLayout { id: actionRow; spacing: 8; Layout.alignment: Qt.AlignRight | Qt.AlignVCenter }
    }

    Rectangle { Layout.fillWidth: true; height: 1; color: Theme.rule }
}