import {Button} from "Components.slint";

export component StartPage inherits Rectangle {
    in property <float> scale;
    in property <bool> is-ready;
    in property <bool> is-restart;

    callback request-start;

    width: 100%;
    height: 100%;

    // 背景渐变 (从左上角的米色到右下角的淡粉色)
    Rectangle {
        background: @linear-gradient(135deg, #fdfbf7 0%, #f3e7e9 100%);
    }

    // 中心卡片
    Rectangle {
        width: 600px * scale;
        height: 600px * scale; // 根据内容高度调整
        background: #FDFBF8; // 略微区别于背景的米白色
        border-radius: 20px * scale;

        // 简单的阴影模拟
        drop-shadow-blur: 20px * scale;
        drop-shadow-color: #00000015;
        drop-shadow-offset-y: 4px * scale;

        VerticalLayout {
            padding: 40px * scale;
            spacing: 20px * scale;
            alignment: center;

            // 标题区域
            VerticalLayout {
                spacing: 8px * scale;
                alignment: center;

                Text {
                    text: "UNO";
                    font-size: 96px * scale;
                    font-weight: 700;
                    color: #222222;
                    horizontal-alignment: center;
                }

                Text {
                    text: is-restart ? "游戏结束，重新准备以重新开始游戏" : "连接成功，所有玩家准备后开始游戏";
                    font-size: 14px * scale;
                    color: #666666;
                    horizontal-alignment: center;
                }
            }

            // 占位间隔
            Rectangle {
                height: 10px * scale;
            }

            // 底部按钮区域 (增加一点顶部间距)
            HorizontalLayout {
                padding-top: 10px * scale;
                alignment: center;

                Button {
                    scale: root.scale;
                    enabled: !is-ready;
                    text: is-ready ? "已准备" : "准备";
                    clicked => {
                        root.request-start();
                    }
                }
            }
        }
    }
}