import { Palette } from "Palette.slint";
import { VText } from "Text.slint";

export component VTag inherits Rectangle {

	in property text <=> text-component.text;
	in property text-color <=> text-component.color;
	in property size <=> text-component.font-size;
	in property background-color <=> self.background;

	callback clicked;

	background: Palette.control-background;
	border-radius: 8px;

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

	VerticalLayout {
		padding-left: 8px;
		padding-right: 8px;
		alignment: center;
		text-component := VText {
			horizontal-alignment: center;
		}
	}
}
