import { Theme } from "../theme.slint";

/// PageLayout — full page wrapper con header + toolbar + content slot
export component PageLayout {
    in property <string> title: "";
    in property <string> subtitle: "";
    in property <bool> has-back: false;
    callback back-clicked;

    VerticalLayout {
        spacing: 0;
        // Header
        Rectangle { min-height: 48px;
            HorizontalLayout { spacing: Theme.sp-4; alignment: start; padding-left: Theme.sp-6; padding-right: Theme.sp-6;
                if (root.has-back) : Rectangle {
                    width: 28px; height: 28px;
                    border-radius: Theme.radius-sm;
                    background: back.has-hover ? Theme.bg-hover : transparent;
                    Text { text: "\u{2190}"; color: Theme.neon-cyan; font-size: Theme.font-lg; horizontal-alignment: center; vertical-alignment: center; }
                    back := TouchArea { clicked => { root.back-clicked(); } mouse-cursor: MouseCursor.pointer; }
                }
                VerticalLayout { spacing: 2px;
                    Text { text: root.title; font-size: Theme.font-2xl; font-weight: 700; color: Theme.text-primary; }
                    if (root.subtitle != "") : Text { text: root.subtitle; font-size: Theme.font-sm; color: Theme.text-muted; }
                }
                Rectangle { horizontal-stretch: 1; }
            }
        }
        Rectangle { height: 1px; background: Theme.border; }
        // Content
        Rectangle {
            vertical-stretch: 1;
            Flickable { vertical-stretch: 1; horizontal-stretch: 1;
                VerticalLayout {
                    padding: Theme.sp-6;
                    spacing: Theme.sp-4;
                    @children
                }
            }
        }
    }
}
