import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    id: root
    property int minValue: 0
    property int maxValue: 100

    implicitWidth: 90
    implicitHeight: 220

    ColumnLayout {
        anchors.fill: parent
        spacing: 6

        Label {
            text: root.maxValue
            font.pixelSize: 12
            opacity: 0.9
            Layout.alignment: Qt.AlignHCenter
        }

        Rectangle {
            Layout.alignment: Qt.AlignHCenter
            Layout.fillHeight: true
            width: 26
            radius: 6
            border.width: 1
            border.color: Qt.rgba(1, 1, 1, 0.18)

            gradient: Gradient {
                // must match shaders/dots.frag:dataColorRamp (high at top)
                GradientStop { position: 0.00; color: Qt.rgba(1.00, 0.22, 0.10, 1.0) } // c3
                GradientStop { position: 0.34; color: Qt.rgba(1.00, 0.92, 0.22, 1.0) } // c2
                GradientStop { position: 0.67; color: Qt.rgba(0.10, 0.95, 0.35, 1.0) } // c1
                GradientStop { position: 1.00; color: Qt.rgba(0.10, 0.75, 1.00, 1.0) } // c0
            }
        }

        Label {
            text: root.minValue
            font.pixelSize: 12
            opacity: 0.9
            Layout.alignment: Qt.AlignHCenter
        }
    }
}