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

export component ToggleButton inherits Rectangle {

	in property text <=> text-component.text;
	in property text-color <=> text-component.color;
	in property text-alignment <=> text-component.horizontal-alignment;
	in property<bool> active: false;
	callback clicked;


	background: root.active ? Palette.control-background
		: ta.has-hover ? Palette.control-background.transparentize(0.5)
		: Colors.transparent;
	border-radius: 4px;

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

	VerticalLayout {
		padding: 8px;
		padding-top: 4px;
		padding-bottom: 4px;
		text-component := VText {
			horizontal-alignment: center;
		}
	}
	
}