// A pill in a preset switcher: filled ember when it is the one the live
// settings currently match, outlined otherwise. Clicking any pill applies it
// at once — there is no separate "Apply" step. Shared by SettingsPage (the
// full switcher, with the numbers editable below it) and TimerPage (a quick
// way to change the length of the *next* interval without leaving the dial).
import QtQuick
import QtQuick.Controls

import ".."

Rectangle {
    id: chip
    property string text: ""
    property bool active: false
    signal clicked()

    implicitWidth: label.implicitWidth + 28
    implicitHeight: 32
    radius: 16
    color: chip.active ? Theme.ember : (chipHover.hovered ? Qt.alpha(Theme.ember, 0.10) : "transparent")
    border.width: chip.active ? 0 : 1
    border.color: chipHover.hovered ? Theme.ember : Theme.rule
    Behavior on color { ColorAnimation { duration: 110 } }

    Label {
        id: label
        anchors.centerIn: parent
        text: chip.text
        color: chip.active ? "white" : Theme.ink
        font.pixelSize: 12
        font.weight: chip.active ? Font.DemiBold : Font.Medium
        font.family: Theme.sansFamily
    }
    HoverHandler { id: chipHover; cursorShape: Qt.PointingHandCursor }
    TapHandler {
        grabPermissions: PointerHandler.TakeOverForbidden
        onTapped: chip.clicked()
    }
}