import QtQuick
import Nebula.UI

Item {
    id: root

    implicitWidth: row.implicitWidth + 18
    implicitHeight: Theme.controlHeight
    property bool checked: false

    signal clicked()

    Accessible.role: Accessible.Button
    Accessible.name: qsTr("Nebula")
    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

        NebulaIcon {
            name: "nebula"
            size: 18
            color: root.checked ? Theme.accentStrong : Theme.textPrimary
            anchors.verticalCenter: parent.verticalCenter
        }

        Text {
            text: qsTr("Nebula")
            color: root.checked ? Theme.accentStrong : Theme.textPrimary
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSize
            font.weight: Font.DemiBold
            anchors.verticalCenter: parent.verticalCenter
        }
    }

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

    FocusFrame {
        radius: Theme.radiusSmall
    }
}