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

export component Progress {
    in property <float> value: 0; // 0-100
    in property <bool> show-label: false;
    
    min-height: 8px;
    
    VerticalLayout {
        spacing: SpacingSystem.spacing.s1;
        
        // Progress bar
        track := Rectangle {
            height: 8px;
            background: Theme.colors.primary.transparentize(0.8);
            border-radius: SpacingSystem.radius.full;
            
            indicator := Rectangle {
                width: parent.width * Math.max(0, Math.min(100, root.value)) / 100;
                height: parent.height;
                background: Theme.colors.primary;
                border-radius: SpacingSystem.radius.full;
                
                animate width { duration: Animations.durations.normal; easing: Animations.ease-out; }
            }
        }
        
        // Optional label
        if root.show-label: label := Text {
            text: Math.round(root.value) + "%";
            color: Theme.colors.muted-foreground;
            font-size: Typography.sizes.xs;
            horizontal-alignment: right;
        }
    }
}