import { Theme } from "../theme.slint";

export component NeonBadge {
    in property <string> text;
    in property <color> color: Theme.neon-cyan;
    in property <string> variant: "filled";

    property <bool> is-filled: variant == "filled";

    Rectangle {
        border-radius: Theme.radius-full;
        border-width: 1px;
        border-color: color;
        background: is-filled ? color : transparent;
        HorizontalLayout {
            padding-left: Theme.sp-2;
            padding-right: Theme.sp-2;
            Text { text: root.text; color: is-filled ? Theme.text-inverse : root.color; font-size: Theme.font-xs; font-weight: 600; horizontal-alignment: center; vertical-alignment: center; }
        }
    }
}

export component StatusDot {
    in property <color> color: Theme.neon-green;
    in property <string> label: "";

    HorizontalLayout {
        spacing: Theme.sp-1;
        alignment: start;
        Rectangle { width: 8px; height: 8px; border-radius: 4px; background: root.color; }
        if (root.label != "") : Text { text: root.label; font-size: Theme.font-xs; color: Theme.text-muted; vertical-alignment: center; }
    }
}

export component NeonTag {
    in property <string> text;
    in property <color> color: Theme.neon-cyan;
    in property <bool> removable: false;
    callback removed;

    Rectangle {
        min-height: 24px;
        border-radius: Theme.radius-md;
        background: root.color;
        HorizontalLayout {
            padding-left: Theme.sp-2;
            spacing: Theme.sp-1;
            alignment: center;
            Text { text: root.text; color: Theme.text-inverse; font-size: Theme.font-xs; vertical-alignment: center; }
            padding-right: root.removable ? Theme.sp-1 : Theme.sp-2;
            if (root.removable) : TouchArea { width: 18px; height: 18px;
                Rectangle { width: 18px; height: 18px; border-radius: 9px;
                    Text { text: "×"; color: Theme.text-inverse; font-size: 10px; horizontal-alignment: center; vertical-alignment: center; }
                } clicked => { root.removed(); }
            }
        }
    }
}

export component CountBadge {
    in property <int> count: 0;
    in property <bool> shown: true;

    Rectangle {
        visible: root.shown && root.count > 0;
        width: 20px; height: 20px; border-radius: 10px;
        background: Theme.neon-magenta;
        Text { text: root.count < 100 ? root.count : "9+"; font-size: Theme.font-xs; font-weight: 700; color: Theme.text-inverse; horizontal-alignment: center; vertical-alignment: center; }
    }
}
