// One glyph + percentage pair inside VitalsWidget. Split out so the three
// fields cannot drift apart in spacing, width or colour thresholds.

import QtQuick
import qs.config

Row {
    id: root

    required property string glyph
    required property real value

    property int warnAt: 70
    property int dangerAt: 90

    spacing: 4

    Text {
        anchors.verticalCenter: parent.verticalCenter
        text: root.glyph
        font.family: Theme.fontMono
        font.pixelSize: Theme.fontSize
        color: Theme.fgDim
    }

    Text {
        anchors.verticalCenter: parent.verticalCenter
        text: Math.round(root.value) + "%"

        // Tabular figures and a fixed width so the row doesn't jitter as digits
        // change — a moving bar is far more distracting than a wide one. Sans,
        // not mono: this is UI text, not terminal output.
        font.family: Theme.fontFamily
        font.features: Theme.tabularFigures
        font.pixelSize: Theme.fontSizeSmall
        horizontalAlignment: Text.AlignRight
        width: 30

        color: {
            if (root.value >= root.dangerAt)
                return Theme.danger;
            if (root.value >= root.warnAt)
                return Theme.warn;
            return Theme.fg;
        }

        Behavior on color {
            ColorAnimation {
                duration: Theme.durFast
            }
        }
    }
}