pub fn Page(allocator: zx.Allocator) zx.Component {
    const user_names = [_][]const u8{ "John", "Jane", "Jim", "Jill" };
    return (
        <main @allocator={allocator}>
            {for (user_names) |name| (<p>{name}</p>)}
        </main>
    );
}

pub fn StructCapture(allocator: zx.Allocator) zx.Component {
    return (
        <main @allocator={allocator}>
            {for (users) |user| (<p>{user.name} - {user.age}</p>)}
        </main>
    );
}

pub fn StructExtraCapture(allocator: zx.Allocator) zx.Component {
    return (
        <main @allocator={allocator}>
            {for (users, 0..) |user, i| (<p>{i} - {user.name} - {user.age}</p>)}
        </main>
    );
}

pub fn StructComplexParam(allocator: zx.Allocator) zx.Component {
    const data = .{ .users = users };
    return (
        <main @allocator={allocator}>
            {for (data.users, 0..) |u, i| (<p>{u} - {i} - {users[i].name} - {users[i].age}</p>)}
            {for (getUsers(), 0..) |user, i| (<p>{i} - {user.name} - {user.age}</p>)}
        </main>
    );
}

fn getUsers() [users.len]User {
    return users;
}

pub fn StructCaptureToComponent(allocator: zx.Allocator) zx.Component {
    return (
        <main @allocator={allocator}>
            {for (users) |user| (<UserComponent name={user.name} age={user.age} />)}
        </main>
    );
}

const User = struct { name: []const u8, age: u32 };
const users = [_]User{
    .{ .name = "John", .age = 20 },
    .{ .name = "Jane", .age = 21 },
    .{ .name = "Jim", .age = 22 },
    .{ .name = "Jill", .age = 23 },
};

fn UserComponent(allocator: zx.Allocator, props: User) zx.Component {
    return (<p @allocator={allocator}>{props.name} - {props.age}</p>);
}

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