// Syntax showcase — every feature in one Button.
//
// NOT compiled by build.rs. This is reference material, not drop-in code.
// It exercises every RUITL construct (props, defaults, optional props,
// attribute expressions, conditional rendering, if-let) in a single
// component so you can scan the whole surface area quickly.
//
// For a compilable Button, see `examples/demo_templates/DemoButton.ruitl`
// (used by `examples/server_integration.rs`).

import "std::collections" { HashMap }

component Button {
    props {
        text: String,
        variant: String = "primary",
        size: String = "medium",
        disabled: bool = false,
        icon: String?,
        loading: bool = false,
        onclick: String?,
    }
}

ruitl Button(props: ButtonProps) {
    <button
        class={format!("btn btn-{} btn-{}", props.variant, props.size)}
        disabled?={props.disabled || props.loading}
        onclick={props.onclick.as_deref().unwrap_or("")}
        type="button"
    >
        if props.loading {
            <span class="spinner" aria-hidden="true"></span>
            <span class="sr-only">Loading...</span>
        } else {
            if let Some(icon) = &props.icon {
                <i class={format!("icon icon-{}", icon)} aria-hidden="true"></i>
            }
            <span class="btn-text">{props.text}</span>
        }
    </button>
}
