// An inset paragraph inside a card: the explanation that is too long to be a
// row's `detail` and too important to be left out.
//
//   SettingsNote {
//       headline: "Sticky, slow and bounce keys are not offered"
//       body: "Hyprland has no such options..."
//   }
//
// Deliberately quiet. This is not a warning banner and must never grow one's
// coloring: the things it explains are absences and boundaries, not problems,
// and a red-edged box would make "this desktop cannot do that yet" read as
// "something is wrong here". It sits darker than the card it is in, which is
// the whole visual signal it needs -- a note, set into the surface.

import QtQuick
import qs.config

Rectangle {
    id: root

    // The claim, in one line. Said first because a reader who stops after it
    // still leaves with the answer.
    property string headline: ""
    // Why the claim is true. This is where the receipts go.
    property string body: ""

    width: parent ? parent.width : 620
    implicitHeight: copy.implicitHeight + 22
    radius: Theme.cardRadius
    color: Theme.alpha(Theme.bgDark, 0.5)
    border.width: 1
    border.color: Theme.alpha(Theme.fg, 0.08)

    // Read out as one passage rather than as two unrelated fragments.
    Accessible.role: Accessible.StaticText
    Accessible.name: root.headline
    Accessible.description: root.body

    Column {
        id: copy

        anchors.left: parent.left
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        anchors.leftMargin: 13
        anchors.rightMargin: 13
        spacing: 4

        Text {
            width: parent.width
            visible: root.headline !== ""
            text: root.headline
            color: Theme.fg
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
            font.weight: Font.DemiBold
            wrapMode: Text.WordWrap
        }

        Text {
            width: parent.width
            visible: root.body !== ""
            text: root.body
            color: Theme.fgDim
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
            lineHeight: 1.35
            wrapMode: Text.WordWrap
        }
    }
}