export component SquareIconWidget {
    // Basic parameters shared by all square icon widgets
    in property <int> bar_height;
    in property <string> icon_text;
    in property <int> icon_font_size;
    in property <string> tooltip_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;

    // Badge
    in property <int> badge_count: 0;
    in property <color> badge_color: #165a96;
    in property <color> badge_text_color: #ffffff;

    callback square_btn_callback();

    height: bar_height * 1px;
    width: bar_height * 1px;

    Rectangle {
        background: touch_area.pressed ? bg_clicked
                  : touch_area.has-hover ? bg_hover
                  : bg_normal;
        border-radius: 3px;

        // Main icon centered
        HorizontalLayout {
            padding-left: 3px;
            padding-right: 3px;

            Text {
                text: icon_text;    // The icon
                color: icon_color;
                font-size: icon_font_size *1px;
                vertical-alignment: center;
                horizontal-alignment: center;
            }
        }

        // Click area
        touch_area := TouchArea {
            // Action when the icon is clicked
            clicked => { square_btn_callback(); }
        }

        // Badge overlay (bottom-right)
        if badge_count > 0 : Rectangle {
            // Outer container: positioned and height-constrained
            height: (bar_height / 3 + 3) * 1px;
            x: root.width - self.width - 1px;
            y: root.height - self.height - 1px;
            horizontal-stretch: 0;
            
            HorizontalLayout {
                padding-left: 1px;
                padding-right: 1px;
                alignment: end;
                
                Rectangle {
                    background: badge_color;
                    border-radius: self.height / 3;
                    min-width: self.height;
                    
                    Text {
                        text: badge_count;
                        color: badge_text_color;
                        vertical-alignment: center;
                        horizontal-alignment: center;
                        font-size: (bar_height / 3) * 1px;
                    }
                }
            }
        }
    }
     // Tooltip will be added later
}