import QtQuick
import QtQuick.Layouts
import ZShell.Config
import qs.Services

CustomRect {
	id: root

	required property string label
	required property real max
	required property real min
	property var onValueModified: function (value) {}
	property real step: 1
	required property real value

	Layout.fillWidth: true
	color: Colors.layer(Colors.palette.m3surfaceContainer, 2)
	implicitHeight: row.implicitHeight + Tokens.padding.large * 2
	radius: Tokens.rounding.normal

	Behavior on implicitHeight {
		Anim {
		}
	}

	RowLayout {
		id: row

		anchors.left: parent.left
		anchors.margins: Tokens.padding.large
		anchors.right: parent.right
		anchors.verticalCenter: parent.verticalCenter
		spacing: Tokens.spacing.normal

		CustomText {
			Layout.fillWidth: true
			text: root.label
		}

		CustomSpinBox {
			max: root.max
			min: root.min
			step: root.step
			value: root.value

			onValueModified: value => {
				root.onValueModified(value);
			}
		}
	}
}