// Underlined, muted text-link primitive. Turns accent-colored on hover.

import { Theme } from "../foundation/semantic-colors.slint";
import { Typography } from "../foundation/typography.slint";

export component QbzTextLink inherits Rectangle {
    in property <string> label;
    callback clicked();

    width: txt.preferred-width;
    height: txt.preferred-height + 3px;

    txt := Text {
        x: 0;
        y: 0;
        text: root.label;
        color: ta.has-hover ? Theme.accent : Theme.text-muted;
        font-size: Typography.link;
    }

    // Underline.
    Rectangle {
        x: 0;
        y: txt.preferred-height + 1px;
        width: txt.preferred-width;
        height: 1px;
        background: ta.has-hover ? Theme.accent : Theme.text-muted;
    }

    ta := TouchArea {
        mouse-cursor: pointer;
        clicked => {
            root.clicked();
        }
    }
}