import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    id: root

    property var theme
    property string title: ""
    property string description: ""
    default property alias contentData: content.data

    implicitHeight: cardColumn.implicitHeight + 24

    Rectangle {
        anchors.fill: parent
        radius: root.theme ? root.theme.cardRadius : 14
        color: root.theme ? root.theme.surface : "#181825"
        border.color: root.theme ? root.theme.border : "#313244"
        border.width: 1
    }

    ColumnLayout {
        id: cardColumn
        anchors.fill: parent
        anchors.margins: 12
        spacing: 8

        ColumnLayout {
            visible: root.title.length > 0 || root.description.length > 0
            Layout.fillWidth: true
            spacing: 1

            Label {
                text: root.title
                color: root.theme ? root.theme.text : "#cdd6f4"
                font.pixelSize: 15
                font.bold: true
                Layout.fillWidth: true
                elide: Text.ElideRight
            }
            Label {
                visible: root.description.length > 0
                text: root.description
                color: root.theme ? root.theme.mutedText : "#9399b2"
                font.pixelSize: 11
                Layout.fillWidth: true
                wrapMode: Text.Wrap
            }
        }

        ColumnLayout {
            id: content
            Layout.fillWidth: true
            spacing: 7
        }
    }
}