import QtQuick
import QtQuick.Layouts
import "../config"

// A pill showing a coloured Nerd Font icon followed by a value string.
Pill {
    id: root
    property string icon: ""
    property string value: ""
    property color iconColor: Theme.text
    property alias label: valueText
    // Widest value the pill will ever show, e.g. "100%". When set, the value
    // column reserves that width so changing values never shift other widgets.
    property string reserve: ""

    Text {
        text: root.icon
        font.family: Theme.monoFont
        font.pixelSize: Theme.fontSize + 1
        color: root.iconColor
        Layout.alignment: Qt.AlignVCenter
    }

    TextMetrics {
        id: reserveMetrics
        font: valueText.font
        text: root.reserve
    }

    Text {
        id: valueText
        text: root.value
        font.family: Theme.font
        font.pixelSize: Theme.fontSize
        color: Theme.text
        horizontalAlignment: Text.AlignRight
        Layout.alignment: Qt.AlignVCenter
        Layout.preferredWidth: root.reserve ? reserveMetrics.advanceWidth : implicitWidth
    }
}