import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    id: warningAlert

    // Customizable properties
    property string alertTitle: "Warning"
    property string alertMessage: "This is a warning message about a dangerous operation."
    property bool showIcon: true
    property bool closable: true
    property bool showTitle: true

    // Size properties
    implicitHeight: contentLayout.implicitHeight + 24 // Padding
    radius: Theme.radius

    // Warning style colors - already had these
    color: "#fffbe6"        // Light yellow background
    border.color: "#ffe58f" // Yellow border
    border.width: 1

    RowLayout {
        id: contentLayout
        anchors {
            left: parent.left
            right: parent.right
            top: parent.top
            margins: 12
        }
        spacing: 12

        // Warning icon
        Rectangle {
            id: iconContainer
            visible: showIcon
            width: 16
            height: 16
            color: "transparent"

            AppIcon {
                anchors.centerIn: parent
                source: "qrc:/live.flowy/imports/DesignSystem/anronicons/mono/alerts/alert-triangle.svg"
                iconHeight: 16
                iconWidth: 16
                color: "#faad14"
            }
        }

        // Content area
        ColumnLayout {
            Layout.fillWidth: true
            spacing: 4

            // Title
            Text {
                id: titleText
                visible: showTitle
                text: alertTitle
                font.bold: true
                font.pixelSize: 14
                color: "#613400"
            }

            // Message
            Text {
                id: messageText
                text: alertMessage
                wrapMode: Text.WordWrap
                Layout.fillWidth: true
                color: "#613400"
                font.pixelSize: 12
            }
        }

        // Close button
        Rectangle {
            id: closeButton
            visible: closable
            width: 16
            height: 16
            color: "transparent"

            Text {
                anchors.centerIn: parent
                text: "×"
                font.pixelSize: 16
                color: "#613400"
            }

            MouseArea {
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                onClicked: warningAlert.visible = false

                // Hover effect
                hoverEnabled: true
                onEntered: closeButton.color = "#ffeeb5"
                onExited: closeButton.color = "transparent"
            }
        }
    }
}