// Reusable UI building blocks (AGENTS.md §7).
//
// In Phase 2 C1 every theme-aware color is a fixed Dark-theme default. Phase
// 2 C3 will widen these to take a Palette struct or forward from `parent`
// so Light/System can repaint the sidebar too.

export component NavItem inherits Rectangle {
    in property <string> label;
    in property <bool> selected: false;
    in property <bool> has-accent: true;

    in property <color> bg-idle: #00000000;
    in property <color> bg-selected: #2f3035;
    in property <color> text-idle: #a0a0a0;
    in property <color> text-selected: #e6e6e6;
    in property <color> accent-color: #4ea1ff;

    callback clicked();

    width: 100%;
    height: 36px;
    border-radius: 8px;
    background: selected ? bg-selected : bg-idle;

    Rectangle {
        x: 4px;
        y: 8px;
        width: 3px;
        height: parent.height - 16px;
        border-radius: 2px;
        background: accent-color;
        opacity: root.has-accent && root.selected ? 1.0 : 0.0;
    }

    Text {
        x: 16px;
        y: (parent.height - self.height) / 2;
        text: root.label;
        color: selected ? text-selected : text-idle;
        font-size: 13px;
        font-weight: selected ? 600 : 400;
    }

    TouchArea {
        clicked => {
            root.clicked();
        }
    }
}

export component SectionLabel inherits Text {
    in property <string> label;
    in property <color> text-color: #6a6a6a;

    text: label;
    color: text-color;
    font-size: 11px;
    font-weight: 700;
}

export component Divider inherits Rectangle {
    in property <color> line-color: #3a3b40;

    height: 1px;
    background: line-color;
}