// Lightweight Demo Application
// Minimal memory footprint version

import { Theme, Typography, SpacingSystem } from "theme/theme.slint";
import { Button } from "components/button.slint";
import { Input } from "components/input.slint";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "components/card.slint";
import { Badge } from "components/badge.slint";

export component DemoLite inherits Window {
    title: "Slint Shadcn UI - Lite Demo";
    background: Theme.colors.background;

    // Smaller window size
    min-width: 500px;
    min-height: 400px;
    preferred-width: 700px;
    preferred-height: 500px;
    
    // Minimal state
    in-out property <string> input-text: "";
    
    VerticalLayout {
        padding: SpacingSystem.spacing.s4;
        spacing: SpacingSystem.spacing.s4;
        
        // Header
        HorizontalLayout {
            spacing: SpacingSystem.spacing.s3;
            alignment: space-between;
            
            Text {
                text: "Shadcn UI Demo";
                font-size: Typography.sizes.xl;
                font-weight: Typography.weights.bold;
                color: Theme.colors.foreground;
            }
            
            Button {
                text: Theme.is-dark-mode ? "☀" : "🌙";
                variant: "outline";
                size: "sm";
                clicked => { Theme.toggle-theme(); }
            }
        }
        
        // Main card
        Card {
            CardHeader {
                CardTitle { text: "Button Showcase"; }
                CardDescription { text: "Various button styles"; }
            }
            
            CardContent {
                VerticalLayout {
                    spacing: SpacingSystem.spacing.s3;
                    
                    // Button variants
                    HorizontalLayout {
                        spacing: SpacingSystem.spacing.s2;
                        Button { text: "Default"; }
                        Button { text: "Secondary"; variant: "secondary"; }
                        Button { text: "Outline"; variant: "outline"; }
                        Button { text: "Ghost"; variant: "ghost"; }
                    }
                    
                    // Destructive button
                    HorizontalLayout {
                        spacing: SpacingSystem.spacing.s2;
                        Button { text: "Destructive"; variant: "destructive"; }
                        Button { text: "Disabled"; disabled: true; }
                    }
                }
            }
        }
        
        // Input card
        Card {
            CardHeader {
                CardTitle { text: "Input & Badge"; }
            }
            
            CardContent {
                VerticalLayout {
                    spacing: SpacingSystem.spacing.s3;
                    
                    Input {
                        value <=> input-text;
                        placeholder: "Type something...";
                    }
                    
                    HorizontalLayout {
                        spacing: SpacingSystem.spacing.s2;
                        Badge { text: "Default"; }
                        Badge { text: "Secondary"; variant: "secondary"; }
                        Badge { text: "Outline"; variant: "outline"; }
                    }
                }
            }
        }
    }
}