// A small uppercase heading, with an optional count beside it.
//
//   SectionLabel { text: "Camera"; count: "2 applications have asked" }
//
// A card whose rows come from four different permission tables needs to say
// which table a row belongs to, and a second SettingsCard per table would give
// four headers, four subtitles and four borders to one subject. This is the
// lighter divider: it groups rows without pretending they are separate topics.
//
// It does the same job one level up, between cards, where a page has more
// cards than a reader can hold at once and they fall into two or three
// stretches -- Sound's "Alerts & feedback", Displays' "All displays". Same
// shape either way, which is the point of it being one component.

import QtQuick
import qs.config

Item {
    id: root

    property string text: ""
    property string count: ""

    width: parent ? parent.width : 620
    implicitHeight: 30

    Row {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 4
        spacing: 8

        Text {
            text: root.text
            color: Theme.fgMuted
            font.family: Theme.fontFamily
            font.pixelSize: Math.max(9, Theme.fontSizeSmall - 1)
            font.weight: Font.DemiBold
            font.capitalization: Font.AllUppercase
            font.letterSpacing: 0.7
        }

        Text {
            visible: root.count !== ""
            text: root.count
            color: Theme.alpha(Theme.fgMuted, 0.75)
            font.family: Theme.fontFamily
            // Counts are the usual thing to put here, and a count that changes
            // as a filter narrows should not shuffle the digits beside it.
            font.features: Theme.tabularFigures
            font.pixelSize: Math.max(9, Theme.fontSizeSmall - 1)
            font.letterSpacing: 0.7
        }
    }
}