// A quick action on the Home overview: one glyph, one name, one line of state,
// one tap. The fixed set lives in HomePage; this only draws and reports.

import QtQuick
import qs.config

Rectangle {
    id: root

    property string glyph
    property color glyphColor: Theme.accent
    property string label
    property string caption
    property bool interactive: true

    signal activated()

    radius: 14
    color: tileArea.containsMouse && root.interactive
        ? Theme.alpha(Theme.fg, 0.09)
        : Theme.alpha(Theme.fg, 0.05)
    border.width: 1
    border.color: Theme.alpha(Theme.fg, 0.07)
    implicitHeight: body.implicitHeight + 24

    Column {
        id: body

        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.margins: 12
        spacing: 7

        Rectangle {
            width: 30
            height: 30
            radius: 10
            color: Theme.alpha(root.glyphColor, 0.13)

            Text {
                anchors.centerIn: parent
                text: root.glyph
                color: root.glyphColor
                font.family: Theme.fontMono
                font.pixelSize: 14
            }
        }

        Text {
            width: parent.width
            text: root.label
            color: Theme.fg
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSize
            font.weight: Font.DemiBold
            elide: Text.ElideRight
        }

        Text {
            width: parent.width
            text: root.caption
            color: Theme.fgDim
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
            wrapMode: Text.WordWrap
            maximumLineCount: 2
            elide: Text.ElideRight
        }
    }

    MouseArea {
        id: tileArea
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: root.interactive ? Qt.PointingHandCursor : Qt.ArrowCursor
        onClicked: if (root.interactive) root.activated()
    }

    Accessible.role: Accessible.Button
    Accessible.name: root.label
    Accessible.description: root.caption
}