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

export enum LabelSize {
    xs,
    sm,
    base,
    lg,
    xl,
}

export enum LabelColor {
    foreground,
    muted,
    primary,
    secondary,
    destructive,
}

export component Label {
    in property <string> text: "";
    in property <LabelSize> size: LabelSize.base;
    in property <LabelColor> color-variant: LabelColor.foreground;
    in property <int> font-weight: Typography.weights.normal;
    
    private property <length> font-size: size == LabelSize.xs ? Typography.sizes.xs :
                                          size == LabelSize.sm ? Typography.sizes.sm :
                                          size == LabelSize.lg ? Typography.sizes.lg :
                                          size == LabelSize.xl ? Typography.sizes.xl :
                                          Typography.sizes.base;
    
    private property <color> text-color: color-variant == LabelColor.muted ? Theme.colors.muted-foreground :
                                         color-variant == LabelColor.primary ? Theme.colors.primary :
                                         color-variant == LabelColor.secondary ? Theme.colors.secondary :
                                         color-variant == LabelColor.destructive ? Theme.colors.destructive :
                                         Theme.colors.foreground;
    
    Text {
        text: root.text;
        color: root.text-color;
        font-size: root.font-size;
        font-weight: root.font-weight;
        vertical-alignment: center;
    }
}