import {Metrics, DarkPalette} from "../theme.slint";

export component HorizontalBox inherits Rectangle {
    // TODO: border, shadow
    in property <int> p-elevation: 1;
    in property <length> p-rounding: Metrics.radius-md;
    in property <length> p-padding: Metrics.padding-md;
    in property <length> p-spacing: Metrics.spacing-md;
    in property <LayoutAlignment> p-alignment: stretch;

    background: DarkPalette.background[p-elevation];
    border-radius: p-rounding;
    clip: true;

    c-layout := HorizontalLayout {
        alignment: p-alignment;
        padding: p-padding;
        spacing: p-spacing;
        @children
    }
}

export component VerticalBox inherits Rectangle {
    // TODO: border, shadow
    in property <int> p-elevation: 1;
    in property <length> p-rounding: Metrics.radius-md;
    in property <length> p-padding: Metrics.padding-md;
    in property <length> p-spacing: Metrics.spacing-md;
    in property <LayoutAlignment> p-alignment: stretch;

    background: DarkPalette.background[p-elevation];
    border-radius: p-rounding;
    clip: true;

    c-layout := VerticalLayout {
        alignment: p-alignment;
        padding: p-padding;
        spacing: p-spacing;
        @children
    }
}

export component Box inherits Rectangle {
    in property <int> p-elevation: 1;
    in property <length> p-rounding: Metrics.radius-md;
    in property <length> p-padding: Metrics.padding-md;

    background: DarkPalette.background[p-elevation];
    border-radius: p-rounding;
    clip: true;
    padding: p-padding;

    @children
}