import QtQml
import QtQuick 6.7
import QtQuick.Layouts 6.7
import QtQuick.Controls 6.7 as QQC2

import org.kde.kirigami as Kirigami
import org.kde.kirigamiaddons.components as KirigamiComponents

Kirigami.AbstractCard {
    id: root
    required property url avatarUrl
    required property string createdAt
    required property string username
    required property string body

    header: RowLayout {
        KirigamiComponents.Avatar {
            name: root.username
            source: root.avatarUrl
            Layout.preferredWidth: Kirigami.Units.iconSizes.smallMedium
            Layout.preferredHeight: Kirigami.Units.iconSizes.smallMedium
        }
        Kirigami.Heading {
            Layout.fillWidth: true
            id: commentHeading
            level: 3
            text: `@${root.username}`
        }
        QQC2.Label {
            text: new Date(root.createdAt).toLocaleString(Qt.locale(), Locale.ShortFormat)
        }
        Kirigami.ActionToolBar {
            Layout.fillWidth: false
            actions: [
                Kirigami.Action {
                    icon.name: "overflow-menu"

                    Kirigami.Action {
                        text: "Edit"
                        icon.name: "edit-comment"
                    }

                    Kirigami.Action {
                        text: "Delete"
                        icon.name: "delete-comment"
                    }
                }
            ]

            position: QQC2.ToolBar.Header
        }
    }

    contentItem: Item {
        implicitWidth: delegateLayout.implicitWidth
        implicitHeight: delegateLayout.implicitHeight
        ColumnLayout {
            id: delegateLayout
            spacing: Kirigami.Units.largeSpacing
            anchors {
                top: parent.top
                left: parent.left
                right: parent.right
            }

            Kirigami.Separator {
                Layout.fillWidth: true
            }
            MarkdownLabel {
                Layout.fillWidth: true
                text: root.body
            }
        }
    }
}