// Empty state component - Shows when no data is available
import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";

export component Empty inherits Rectangle {
    in property <string> icon: "📭";
    in property <string> title: "No Data";
    in property <string> description: "";

    background: transparent;

    VerticalLayout {
        alignment: center;
        spacing: SpacingSystem.spacing.s3;

        // Icon
        Text {
            text: root.icon;
            font-size: 48px;
            horizontal-alignment: center;
        }

        // Title
        Text {
            text: root.title;
            font-size: Typography.sizes.lg;
            font-weight: Typography.weights.semibold;
            color: Theme.colors.foreground;
            horizontal-alignment: center;
        }

        // Description (optional)
        if root.description != "": Text {
            text: root.description;
            font-size: Typography.sizes.sm;
            color: Theme.colors.muted-foreground;
            horizontal-alignment: center;
            wrap: word-wrap;
        }
    }
}