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

export component NeonCard {
    in property <string> title: "";
    in property <bool> has-header: true;

    Rectangle {
        background: Theme.bg-elevated;
        border-radius: Theme.radius-lg;
        border-width: 1px;
        border-color: Theme.border;
        VerticalLayout { spacing: 0;
            if (root.has-header) : Rectangle { min-height: 36px;
                HorizontalLayout { padding-left: Theme.sp-4; padding-right: Theme.sp-4; padding-top: Theme.sp-3; padding-bottom: Theme.sp-3; alignment: start;
                    Text { text: root.title; color: Theme.text-primary; font-size: Theme.font-lg; font-weight: 600; horizontal-stretch: 1; vertical-alignment: center; }
                }
                Rectangle { height: 1px; background: Theme.border; y: parent.height - 1px; }
            }
            Rectangle { vertical-stretch: 1;
                VerticalLayout { padding: Theme.sp-4; spacing: Theme.sp-3; @children }
            }
        }
    }
}

export component NeonSection {
    in property <string> title: "";
    in-out property <bool> collapsed: false;
    @children

    VerticalLayout { spacing: 0;
        Rectangle { min-height: 36px;
            Rectangle { height: 1px; background: Theme.border; y: parent.height - 1px; }
            HorizontalLayout { padding-left: Theme.sp-3; padding-right: Theme.sp-3; spacing: Theme.sp-2; alignment: start;
                Text { text: root.collapsed ? "▶" : "▼"; color: Theme.text-muted; font-size: Theme.font-xs; min-width: 16px; vertical-alignment: center; }
                Text { text: root.title; color: Theme.text-muted; font-size: Theme.font-sm; font-weight: 600; vertical-alignment: center; horizontal-stretch: 1; }
            }
            touch := TouchArea { clicked => { root.collapsed = !root.collapsed; } mouse-cursor: MouseCursor.pointer; }
        }
        if (!root.collapsed) : Rectangle { vertical-stretch: 1;
            VerticalLayout { padding: Theme.sp-3; spacing: Theme.sp-2; }
        }
    }
}

export component InfoCard {
    in property <string> icon-text: "";
    in property <string> label: "";
    in property <string> value: "";
    in property <color> accent-color: Theme.neon-cyan;

    min-width: 120px; min-height: 60px;
    Rectangle {
        background: Theme.bg-elevated;
        border-radius: Theme.radius-md;
        border-width: 1px;
        border-color: Theme.border;
        HorizontalLayout { padding: Theme.sp-3; spacing: Theme.sp-3; alignment: start;
            Rectangle { width: Theme.sp-8; height: Theme.sp-8; border-radius: Theme.radius-md; background: root.accent-color;
                Text { text: root.icon-text; color: Theme.text-inverse; font-size: Theme.font-xl; horizontal-alignment: center; vertical-alignment: center; }
            }
            VerticalLayout { spacing: Theme.sp-1;
                Text { text: root.label; color: Theme.text-muted; font-size: Theme.font-xs; }
                Text { text: root.value; color: Theme.text-primary; font-size: Theme.font-xl; font-weight: 700; }
            }
        }
    }
}
