import { BrowserConfig } from "./types.slint";


export component Header inherits Rectangle {
    in property <string> url;
    property <brush> icon-gradient: @linear-gradient(135deg, rgb(59, 130, 246), rgb(6, 182, 212));

    VerticalLayout {
        // width: 100%;
        width: 448px;
        padding: 12px;
        padding-top: 20px;
        spacing: 12px;

        HorizontalLayout {
            spacing: 12px;

            Rectangle {
                width: 48px;
                height: 48px;
                border-radius: 12px;
                background: icon-gradient;

                Image {
                    source: @image-url("../logos/globe.svg");
                    colorize: white;
                }
            }

            VerticalLayout {
                alignment: center;
                spacing: 4px;

                Text {
                    font-family: "Segpoe UI";
                    text: "Выберите браузер";
                    color: #ffffff;
                    font-size: 18px;
                    font-weight: 600;
                }

                Text {
                    font-family: "Segpoe UI";
                    text: "Для открытия ссылки";
                    color: #94a3b8;
                    font-size: 14px;
                }
            }
        }

        Rectangle {
            height: 44px;
            border-radius: 12px;
            background: #1e293b;
            border-width: 1px;
            border-color: #334155;

            HorizontalLayout {
                padding: 12px;
                padding-left: 16px;
                padding-right: 16px;
                spacing: 8px;
                alignment: start;

                Image {
                    source: @image-url("../logos/external_link.svg");
                    width: 16px;
                    colorize: #64748b;
                    height: 16px;
                }

                VerticalLayout {
                    padding-top: 2px;

                    Text {
                        text: "ku6epxboctuk.github.io";
                        color: #cbd5e1;
                        font-size: 14px;
                        font-family: "Consolas";
                    }
                }
            }
        }
    }

    Rectangle {
        height: 1px;
        width: 100%;
        y: parent.height - self.height;
        background: #334155;
    }
}