pub fn Page(allocator: zx.Allocator) zx.Component {
    const count = 42;
    const name = "John";

    return (
        <section @allocator={allocator} class=`test-{count} {getThemeClass(.dark)}` data-name=`person-{name}` id=`test` data-normal={name} data-text="{text}" data-t="`{text}`">
            <p>My name is {name}</p>
            <Component text=`hello {count}` name=`test {name} {getThemeClass(.dark)} more-text` />
        </section>
    );
}

fn Component(ctx: *zx.ComponentCtx(struct {
    text: []const u8,
    name: []const u8,
})) zx.Component {
    return (
        <div>
            <p>{ctx.props.text}</p>
            <p>{ctx.props.name}</p>
        </div>
    );
}

const Theme = enum { light, dark };
fn getThemeClass(theme: Theme) []const u8 {
    return switch (theme) {
        .light => "theme-light",
        .dark => "theme-dark",
    };
}

const zx = @import("zx");
