import QtQuick

Rectangle {
    id: root

    required property Theme theme
    property string text: ""
    property string icon: ""
    property string role: "normal"

    readonly property color roleColor: role === "error" ? theme.error : (role === "warning" ? theme.warning : (role === "info" ? theme.info : (role === "active" ? theme.ui.accent : theme.ui.minor)))

    implicitWidth: Math.min(320, label.implicitWidth + (glyph.visible ? glyph.implicitWidth + labelRow.spacing : 0) + 16)
    implicitHeight: 24
    radius: 8
    color: theme.withAlpha(roleColor, role === "normal" ? 0.06 : 0.12)
    clip: true
    Accessible.role: Accessible.StaticText
    Accessible.name: text

    Row {
        id: labelRow

        anchors.centerIn: parent
        spacing: 5

        Text {
            id: glyph

            visible: root.icon.length > 0
            anchors.verticalCenter: parent.verticalCenter
            color: root.roleColor
            font.family: "Symbols Nerd Font Mono"
            font.pixelSize: 12
            text: root.icon
        }

        NuguText {
            id: label

            width: Math.min(implicitWidth, Math.max(0, root.width - 16 - (glyph.visible ? glyph.implicitWidth + labelRow.spacing : 0)))
            anchors.verticalCenter: parent.verticalCenter
            theme: root.theme
            variant: "meta"
            color: root.theme.content.normal
            text: root.text
        }
    }
}