export component TimeWidget {
    in-out property <string> time_text;
    // Colors
    in property <color> icon_color: #ffffff;
    in property <color> bg_normal: #00000000;
    in property <color> bg_hover: #ffffff10;
    in property <color> bg_clicked: #ffffff30;

    callback show_clock();    // Callback to execute things from Rust, because Slint can't
    
    Rectangle {
        background: touch_area.pressed ? bg_clicked
                  : touch_area.has-hover ? bg_hover
                  : bg_normal; // Bg color based on click & hover  
        border-radius: 3px;

        HorizontalLayout {
            padding-right: 3px;
            padding-left: 3px;
            
            Text {
                text: time_text;
                color: white;
                vertical-alignment: center;
            }
        }

        // Area to sense click and hover
        touch_area:= TouchArea {
            clicked => {
                show_clock();
            }
        }
    }
}