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

export component VTag inherits Rectangle {

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

	callback clicked;

	background: Palette.card-background;
	border-radius: 8phx;
	clip: true;
	border-color: text-color;
	border-width: 1phx;

	Rectangle {
		width: 100%;
		height: 100%;
		background: root.text-color;
		opacity: 0.05;
	}

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

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