import QtQuick
import QtQuick.Layouts
import "../../../config" as Cfg


Item {
    id: root

    readonly property var t: Cfg.Config.theme

    property string icon:       ""
    property string label:      ""
    property string value:      "—"
    property color  iconColor:  t.accent
    property color  dimColor:   t.textDim
    property color  textColor:  t.textMain
    property bool   showBar:    false
    property int    barPct:     0          // 0-100
    property color  barColor:   iconColor
    property color  trackColor: t.statsTrackColor

    implicitHeight: col.implicitHeight
    implicitWidth:  col.implicitWidth

    ColumnLayout {
        id: col
        anchors { left: parent.left; right: parent.right }
        spacing: 5

        RowLayout {
            Layout.fillWidth: true
            spacing: 10

            Rectangle {
                width: 18; height: 18
                radius: 4
                color: Qt.alpha(root.iconColor, 0.15)
                Layout.alignment: Qt.AlignVCenter

                Text {
                    anchors.centerIn: parent
                    text:           root.icon
                    color:          root.iconColor
                    font.pixelSize: 12
                    font.weight:    Font.Bold
                }
            }

            Text {
                text:           root.label
                color:          root.dimColor
                font.pixelSize: 12
                font.weight:    Font.Bold
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignVCenter
            }

            Text {
                text:           root.value
                color:          root.textColor
                font.pixelSize: 12
                font.weight:    Font.Bold
                Layout.alignment: Qt.AlignVCenter
            }
        }

        Rectangle {
            visible:         root.showBar
            Layout.fillWidth: true
            height: 3
            radius: 2
            color:  root.trackColor

            Rectangle {
                width:  parent.width * Math.max(0, Math.min(root.barPct, 100)) / 100
                height: parent.height
                radius: parent.radius
                color:  root.barColor

                // smooth fill transitions on data refresh
                Behavior on width {
                    NumberAnimation { duration: 800; easing.type: Easing.OutCubic }
                }
                Behavior on color {
                    ColorAnimation { duration: 300 }
                }
            }
        }
    }
}