import QtQuick

Item {
    id: root

    property string text: ""
    property bool checked: false
    property color textColor: checked ? Theme.accentStrong : Theme.textPrimary

    default property alias icon: iconHolder.data

    signal clicked()

    implicitWidth: row.implicitWidth + 18
    implicitHeight: Theme.controlHeight
    Accessible.role: Accessible.Button
    Accessible.name: root.text
    Accessible.checkable: true
    Accessible.checked: root.checked
    Accessible.onPressAction: root.clicked()

    Rectangle {
        anchors.fill: parent
        radius: Theme.radiusSmall
        color: (hover.containsMouse || root.checked) ? Theme.accentSoft : "transparent"

        Behavior on color {
            ColorAnimation {
                duration: Theme.animationFast
            }
        }
    }

    Row {
        id: row
        anchors.centerIn: parent
        spacing: 8

        Item {
            id: iconHolder
            width: children.length > 0 ? 18 : 0
            height: 18
            visible: width > 0
        }

        Text {
            text: root.text
            color: root.textColor
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSize
            font.weight: Font.DemiBold
            visible: root.text.length > 0
            anchors.verticalCenter: parent.verticalCenter
        }
    }

    MouseArea {
        id: hover
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        onClicked: root.clicked()
    }

    FocusFrame {
        radius: Theme.radiusSmall
    }
}