// Badge Component
// Small status indicator or label

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

export component Badge {
    // Public properties
    in property <string> text: "Badge";
    in property <string> variant: "default"; // default | secondary | destructive | outline
    
    // Calculate colors based on variant
    private property <color> bg-color: {
        if variant == "destructive" { Theme.colors.destructive }
        else if variant == "secondary" { Theme.colors.secondary }
        else if variant == "outline" { Colors.transparent }
        else { Theme.colors.primary }
    };
    
    private property <color> text-color: {
        if variant == "destructive" { Theme.colors.destructive-foreground }
        else if variant == "secondary" { Theme.colors.secondary-foreground }
        else if variant == "outline" { Theme.colors.foreground }
        else { Theme.colors.primary-foreground }
    };
    
    // Fixed height for badge
    height: 24px;
    
    Rectangle {
        background: bg-color;
        border-radius: 12px; // Fixed radius for consistent rounded look
        border-width: variant == "outline" ? 1px : 0px;
        border-color: Theme.colors.border;
        
        // Center the text
        Text {
            text: root.text;
            font-size: Typography.sizes.xs;
            font-weight: Typography.weights.medium;
            color: text-color;
            vertical-alignment: center;
            horizontal-alignment: center;
            x: 10px;
            width: parent.width - 20px;
        }
    }
}