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

export component Panel inherits Rectangle {
    in property <string> title: "Title";
    in property <TextHorizontalAlignment> title-alignment: left;
    in property <length> content-padding: Metrics.padding-md;
    in property <length> content-spacing: Metrics.spacing-md;

    border-color: black;
    border-width: 1px;
    border-radius: Metrics.radius-md;
    clip: true;

    VerticalLayout {
        Rectangle {
            height: Metrics.size-md;
            border-color: black;
            border-width: 1px;
            HorizontalLayout {
                padding-left: Metrics.padding-md;
                padding-right: Metrics.padding-md;
                Text {
                    font-size: Metrics.font-md;
                    text: title;
                    vertical-alignment: center;
                    horizontal-alignment: title-alignment;
                }
            }
        }

        VerticalLayout {
            padding: content-padding;
            spacing: content-spacing;
            @children
        }
    }
}