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

export component Tooltip {
    in property <string> text: "";
    in property <bool> show: false;
    
    if root.show: popup := Rectangle {
        y: -self.height - 8px;
        x: (parent.width - self.width) / 2;
        width: tooltip-text.width + SpacingSystem.spacing.s3 * 2;
        height: tooltip-text.height + SpacingSystem.spacing.s2 * 2;
        background: Theme.colors.foreground;
        border-radius: SpacingSystem.radius.sm;
        
        drop-shadow-blur: 8px;
        drop-shadow-color: #00000030;
        drop-shadow-offset-y: 2px;
        
        opacity: root.show ? 1 : 0;
        animate opacity { duration: Animations.durations.fast; }
        
        tooltip-text := Text {
            text: root.text;
            color: Theme.colors.background;
            font-size: Typography.sizes.xs;
            horizontal-alignment: center;
            vertical-alignment: center;
            x: SpacingSystem.spacing.s3;
            y: SpacingSystem.spacing.s2;
        }
        
        // Arrow
        arrow := Path {
            y: parent.height;
            x: (parent.width - 8px) / 2;
            width: 8px;
            height: 4px;
            fill: Theme.colors.foreground;
            commands: "M 0 0 L 4 4 L 8 0 Z";
        }
    }
}