import QtQuick
import QtQuick.Controls
import QtQuick.Effects

Slider {
    id: control
    
    background: Rectangle {
        x: control.leftPadding
        y: control.topPadding + control.availableHeight / 2 - height / 2
        implicitWidth: 200
        implicitHeight: 4
        width: control.availableWidth
        height: implicitHeight
        radius: 2
        color: "#2d2d3d"

        Rectangle {
            width: control.visualPosition * parent.width
            height: parent.height
            color: SettingsStyle.accent
            radius: 2
        }
    }

    handle: Rectangle {
        x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
        y: control.topPadding + control.availableHeight / 2 - height / 2
        implicitWidth: 18
        implicitHeight: 18
        radius: 9
        color: "white"
        border.color: SettingsStyle.accent
        border.width: 2
        
        layer.enabled: control.pressed
        layer.effect: MultiEffect {
            blurEnabled: true
            blur: 0.5
            shadowEnabled: true
            shadowColor: SettingsStyle.accent
        }
    }
    // Value Readout (Left side to avoid clipping on right edge)
    Text {
        anchors.right: parent.left
        anchors.rightMargin: 12
        anchors.verticalCenter: parent.verticalCenter
        horizontalAlignment: Text.AlignRight
        
        text: {
            var val = control.value
            return (val % 1 === 0) ? val.toFixed(0) : val.toFixed(1)
        }
        
        color: SettingsStyle.textSecondary
        font.family: "JetBrains Mono"
        font.pixelSize: 12
        font.weight: Font.Medium
    }
}
