// Card Component
// Container for grouping related content with optional hover effect

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

// Main Card component
export component Card {
    in property <bool> hoverable: false;
    
    private property <bool> hovered: false;
    
    // Main container
    Rectangle {
        background: Theme.colors.card;
        border-radius: SpacingSystem.radius.lg;
        border-width: 1px;
        border-color: Theme.colors.border;
        
        // Hover shadow effect
        drop-shadow-blur: hovered && hoverable ? 8px : 0px;
        drop-shadow-color: #00000020;
        drop-shadow-offset-y: hovered && hoverable ? 4px : 0px;
        
        animate drop-shadow-blur, drop-shadow-offset-y { 
            duration: Animations.durations.normal; 
            easing: Animations.ease-in-out; 
        }
        
        VerticalLayout {
            padding: SpacingSystem.spacing.s6;
            spacing: SpacingSystem.spacing.s4;
            
            @children
        }
        
        if hoverable: TouchArea {
            moved => {
                hovered = self.has-hover;
            }
        }
    }
}

// Card Header component
export component CardHeader {
    VerticalLayout {
        spacing: SpacingSystem.spacing.s2;
        @children
    }
}

// Card Title component
export component CardTitle {
    in property <string> text;
    
    Text {
        text: root.text;
        font-size: Typography.sizes.xl;
        font-weight: Typography.weights.semibold;
        color: Theme.colors.card-foreground;
        wrap: word-wrap;
    }
}

// Card Description component
export component CardDescription {
    in property <string> text;
    
    Text {
        text: root.text;
        font-size: Typography.sizes.sm;
        color: Theme.colors.muted-foreground;
        wrap: word-wrap;
    }
}

// Card Content component
export component CardContent {
    VerticalLayout {
        spacing: SpacingSystem.spacing.s4;
        @children
    }
}

// Card Footer component
export component CardFooter {
    HorizontalLayout {
        spacing: SpacingSystem.spacing.s2;
        alignment: end;
        @children
    }
}