pub fn Page(ctx: zx.PageContext) zx.Component {
    const allocator = ctx.arena;
    const myButtonClass = "custom-btn";

    return (
        <html lang="en-US" @allocator={allocator}>
            <head>
                <title>ZX - Props Demo</title>
            </head>

            <body>
                <h1>Custom Component Props Examples</h1>

                <section>
                    <h2>Button Component with Props</h2>
                    <Button title="Click Me!" class="primary-btn" />
                    <Button title="Submit" class={myButtonClass} />
                    <Button />
                </section>

                <section>
                    <h2>Async Score with Dynamic Props</h2>
                </section>

                <template shadowrootmode="open">
                    <ul>
                        <li> <slot name="item-1"> Loading... </slot> </li>
                        <li> <slot name="item-2"> Loading... </slot> </li>
                        <li> <slot name="item-3"> Loading... </slot> </li>
                        <li> <slot name="item-4"> Loading... </slot> </li>
                        <li> <slot name="item-5"> Loading... </slot> </li>
                        <li> <slot name="item-6"> Loading... </slot> </li>
                        <li> <slot name="item-7"> Loading... </slot> </li>
                        <li> <slot name="item-8"> Loading... </slot> </li>
                        <li> <slot name="item-9"> Loading... </slot> </li>
                        <li> <slot name="item-10"> Loading... </slot> </li>
                    </ul>
                </template>
                <span slot="item-1"> <AsyncScore index={1} label="Score" /> </span>
                <span slot="item-2"> <AsyncScore index={2} label="Points" /> </span>
                <span slot="item-3"> <AsyncScore index={3} label="Rating" /> </span>
                <span slot="item-4"> <AsyncScore index={4} label="Score" /> </span>
                <span slot="item-5"> <AsyncScore index={5} label="Points" /> </span>
                <span slot="item-6"> <AsyncScore index={6} label="Rating" /> </span>
                <span slot="item-7"> <AsyncScore index={7} label="Score" /> </span>
                <span slot="item-8"> <AsyncScore index={8} label="Points" /> </span>
                <span slot="item-9"> <AsyncScore index={9} label="Rating" /> </span>
                <span slot="item-10"> <AsyncScore index={10} label="Score" /> </span>
            </body>
        </html>
    );
}

const std = @import("std");
const zx = @import("zx");

const ButtonProps = struct { title: []const u8 = "Click Me", class: []const u8 = "btn" };

fn Button(allocator: zx.Allocator, props: ButtonProps) zx.Component {
    return (
        <button @allocator={allocator} class={props.class}>{props.title} <span>
             ZX
        </span> </button>
    );
}

const AsyncScoreProps = struct { index: u64 = 0, label: []const u8 = "Item" };

fn AsyncScore(allocator: zx.Allocator, props: AsyncScoreProps) zx.Component {
    // const rand = std.crypto.random;
    // const ns = rand.intRangeAtMost(u64, 5, std.time.ns_per_s);
    // std.Thread.sleep(ns);

    return (
        <span @allocator={allocator}>
            {props.label} #{props.index} - Complete
        </span>
    );
}
