import QtQuick
import QtQuick.Controls

Button {
    id: control
    text: "Button"
    
    property color accentColor: "#00f2ff"
    
    contentItem: Text {
        text: control.text
        font.pixelSize: 13
        font.bold: true
        color: control.hovered ? "white" : "#9499b0"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
        
        Behavior on color { ColorAnimation { duration: 200 } }
    }

    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 40
        opacity: control.down ? 0.7 : 1.0
        color: control.hovered ? Qt.rgba(1, 1, 1, 0.1) : Qt.rgba(1, 1, 1, 0.05)
        radius: 8
        border.color: control.hovered ? control.accentColor : Qt.rgba(1, 1, 1, 0.1)
        border.width: 1

        Behavior on border.color { ColorAnimation { duration: 200 } }
        Behavior on color { ColorAnimation { duration: 200 } }
        
        // Glow effect
        Rectangle {
            anchors.fill: parent
            radius: parent.radius
            color: "transparent"
            border.color: control.accentColor
            border.width: 2
            opacity: control.hovered ? 0.5 : 0.0
            visible: opacity > 0
            
            Behavior on opacity { NumberAnimation { duration: 300 } }
        }
    }
}
