using Spry;

/**
 * FeatureCardComponent - A reusable feature card
 * 
 * Displays an icon, title, and description in a styled card
 */
public class FeatureCardComponent : Component {
    
    public string icon { set; get; default = "purple"; }
    public string icon_emoji { set; get; default = "⭐"; }
    public string title { set; get; default = "Feature"; }
    public string description { set; get; default = "Description"; }
    
    public override string markup { get {
        return """
        <div class="feature-card">
            <div class="feature-icon" sid="icon"></div>
            <h3 sid="title"></h3>
            <p sid="description"></p>
        </div>
        """;
    }}
    
    public override async void prepare() throws Error {
        this["icon"].text_content = icon_emoji;
        this["icon"].set_attribute("class", @"feature-icon $icon");
        this["title"].text_content = title;
        this["description"].text_content = description;
    }
}