export component MainWindow inherits Window {

    in property <string> city;
    in property <string> country;
    in property <string> weather_main;
    in property <string> weather_description;
    in property <string> weather_icon;
    in property <string> temperature;
    in property <string> unit;

    always-on-top: true;
    no-frame: true;
    width: 300px;
    height: 124px;
    background: transparent;
    default-font-family: "IosevkaTermSlab Nerd Font Mono";

    Rectangle {
        width: 100%;
        height: 100%;
        border-radius: 12px;
        background: @linear-gradient(160deg, #236a8bc7, #c5edff5c);
        drop-shadow-blur: 15px;
        drop-shadow-color: #00000066;

        GridLayout {
        padding: 12px;
        width: 100%;
        // Top row
        Row {
            HorizontalLayout {
                // Left column - weather icon
                Rectangle {
                    width: 80px;
                    height: 80px;
                    Text {
                        text: weather_icon;
                        font-size: 80px;
                        color: #ffffff;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }
                }

                // Right column
                Rectangle {
                    width: 196px;
                    background: #000;
                    VerticalLayout {
                        alignment: end;
                        // City name  
                        Text {
                            text: city + "," + country; 
                            font-size: 14px;
                            color: #fff;
                            horizontal-alignment: right;
                            vertical-alignment: center;
                            height: 18px;
                            font-weight: 600;
                        }
                        // Temperature block  
                        HorizontalLayout {
                            padding: 0px;
                            // Temperatur value 
                            Rectangle {
                            background: #ff8800;
                                Text {
                                    text: temperature;
                                    color: #ffffff;
                                    font-size: 40px;
                                    horizontal-alignment: right;
                                    vertical-alignment: center;
                                    letter-spacing: 0px;
                                }
                            }
                            // Temperature unit
                            Rectangle {
                            background: #ff009d;
                                VerticalLayout {
                                    padding: 0px;
                                    spacing: 0px;
                                    alignment: end;
                                    // The degree symbol
                                    Text {
                                        text: "o";
                                        font-size: 16px;
                                        color: #fff;
                                        horizontal-alignment: left;
                                        vertical-alignment: center;
                                        height: 25px;
                                        font-weight: 800;
                                    }
                                    // Unit symbol
                                    Text {
                                        text: unit;
                                        font-size: 16px;
                                        color: #fff;
                                        horizontal-alignment: left;
                                        vertical-alignment: center;
                                        height: 20px;
                                        width: 18px;
                                        font-weight: 800;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        // Bottom row
        Row {
            /* Summary */
            Text {
                height: 20px;
                text: weather_main;
                font-size: 18px;    
                color: #fff;
                vertical-alignment: top;
                horizontal-alignment: left;
                width: 40%;         // Fixed percentage width for consistent layout
                font-weight: 800;
            }
            /* Description */
            Text {
                text: weather_description;
                font-size: 12px;    
                color: #ffffffcc;
                horizontal-alignment: TextHorizontalAlignment.right;
                vertical-alignment: TextVerticalAlignment.top;
                horizontal-stretch: 1.0;
                wrap: word-wrap;
                height: 100%;
                font-weight: 600;
            }
        }
    }
    }
}