import QtQuick

Rectangle {
    id: pill

    required property string label
    required property color pillColor
    required property color textColor

    required property string fontFamily
    property string tooltipText: ""
    property bool hovered: hoverArea.containsMouse

    property alias font: pillText.font
    property real textSize: 13

    signal clicked()

    height: 22
    width: pillText.implicitWidth + 16
    radius: 4
    color: pillColor
    anchors.verticalCenter: parent?.verticalCenter
    Behavior on width {
        NumberAnimation { duration: 200; easing.type: Easing.InOutQuad }
    }

    Text {
        id: pillText
        anchors.centerIn: parent
        text: pill.label
        color: pill.textColor
        font.pixelSize: pill.textSize
        font.family: pill.fontFamily
    }

    MouseArea {
        id: hoverArea
        anchors.fill: parent
        hoverEnabled: pill.tooltipText !== ""
        cursorShape: Qt.ArrowCursor
        onClicked: pill.clicked()
    }
}