// Item Component
// List item with icon, title, description and selection state

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

export component Item {
    // Public properties
    in property <string> icon: ""; // Text icon/emoji
    in property <string> title;
    in property <string> description: "";
    in property <bool> selected: false;
    
    // Callbacks
    callback clicked();
    
    // Internal state
    private property <bool> hovered: false;
    
    min-height: 60px;
    
    // Main container
    Rectangle {
        background: selected ? Theme.colors.accent : 
                   hovered ? Theme.colors.muted : 
                   Colors.transparent;
        border-radius: SpacingSystem.radius.md;
        
        animate background { 
            duration: Animations.durations.fast; 
            easing: Animations.ease-in-out; 
        }
        
        HorizontalLayout {
            padding: SpacingSystem.spacing.s3;
            spacing: SpacingSystem.spacing.s3;
            alignment: start;
            
            // Icon (if provided)
            if icon != "": Rectangle {
                width: 40px;
                height: 40px;
                border-radius: SpacingSystem.radius.md;
                background: Theme.colors.muted;
                
                Text {
                    text: icon;
                    font-size: Typography.sizes.xl;
                    horizontal-alignment: center;
                    vertical-alignment: center;
                }
            }
            
            // Content area
            VerticalLayout {
                spacing: SpacingSystem.spacing.s1;
                alignment: center;
                
                // Title
                Text {
                    text: title;
                    font-size: Typography.sizes.base;
                    font-weight: Typography.weights.medium;
                    color: Theme.colors.foreground;
                    wrap: word-wrap;
                }
                
                // Description (if provided)
                if description != "": Text {
                    text: description;
                    font-size: Typography.sizes.sm;
                    color: Theme.colors.muted-foreground;
                    wrap: word-wrap;
                }
            }
        }
        
        // Touch interaction
        TouchArea {
            clicked => {
                root.clicked();
            }
            
            moved => {
                hovered = self.has-hover;
            }
        }
    }
}