import QtQuick
import Nebula.Bigscreen

Item {
    id: root

    property string label: ""
    property string meta: ""
    property string iconText: ""
    property bool focused: false
    property bool pressed: false

    signal activated()

    implicitWidth: Theme.tileWidth
    implicitHeight: Theme.tileHeight

    scale: pressed ? Theme.tilePressScale : (focused ? Theme.tileFocusScale : 1.0)

    Behavior on scale {
        NumberAnimation { duration: Theme.focusScaleDuration; easing.type: Easing.OutCubic }
    }

    Rectangle {
        id: card
        anchors.fill: parent
        radius: 14
        color: Theme.backgroundPanel
        border.width: focused ? 2 : 1
        border.color: focused ? Theme.accentCyan : Theme.accentLine

        Rectangle {
            anchors.fill: parent
            radius: parent.radius
            visible: focused
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#224FD8FF" }
                GradientStop { position: 1.0; color: "transparent" }
            }
        }

        Column {
            anchors.fill: parent
            anchors.margins: 20
            spacing: 10

            Text {
                text: root.iconText
                font.pixelSize: 36
            }

            Text {
                text: root.label
                font: Theme.titleFont
                color: Theme.textPrimary
            }

            Text {
                text: root.meta
                font: Theme.metaFont
                color: Theme.textMuted
            }
        }

        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.margins: 12
            height: 3
            radius: 2
            color: Theme.accentCyan
            opacity: focused ? 1.0 : 0.0

            Behavior on opacity {
                NumberAnimation { duration: Theme.focusScaleDuration }
            }
        }
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onClicked: root.activated()
        onPressed: root.pressed = true
        onReleased: root.pressed = false
        onCanceled: root.pressed = false
    }
}