// A Zig function that returns a `zx.Component`.
pub fn Playground(allocator: zx.Allocator) zx.Component {
    const is_loading = true;
    var i: usize = 0;

    // HTML Block is always surrounded by parentheses and can contain HTML elements and control flow statements.
    return (
        // @allocator or any other attribute starting with `@` is called builtin attribute
        // `@allocator` is used to specify the allocator for the component and its children for mem allocation.
        <main @allocator={allocator}>
            <h1>Hello, Ziex!</h1>

            // `for` loop to iterate over `users` array and render a `Profile` component for each user.
            // Since this is an expression the HTMLs are inside parenteses not curly braces.
            {for (users) |user| (
                // `Profile` component is called with props: name, age, and role.
                // Optional props can be omitted, and the component will receive default values for them.
                <Profile name={user.name} age={user.age} role={user.role} />
            )}

            // `if` statement works just like other control flow statements.
            {if (is_loading) (<p>Loading...</p>) else (<p>Loaded</p>)}

            // `while` loop with an optional increment statement.
            {while (i < 5) : (i += 1) (<i>{i}</i>)}
        </main>
    );
}

// A Ziex Component is a Zig function that returns a `zx.Component`.
// It can have signatures like:
// - `pub fn ComponentName(allocator: zx.Allocator) zx.Component`
// - `pub fn ComponentName(ctx: *zx.ComponentCtx<PropsType>) zx.Component`
// - `pub fn ComponentName(allocator: zx.Allocator, props: PropsType) zx.Component`
fn Profile(ctx: *zx.ComponentCtx(User)) zx.Component {
    return (
        <div @allocator={ctx.allocator}>
        // Exrepssion starts with `{` and ends with `}`. You can use it to access props, call functions, any valid Zig expression
            <h3>{ctx.props.name}</h3>
            <div>{ctx.props.age}</div>
            <strong>
                {switch (ctx.props.role) {
                    .admin => "Admin",
                    .member => "Member",
                }}
            </strong>
        </div>
    );
}

const User = struct { name: []const u8, age: u32, role: enum { admin, member } };

const users = [_]User{
    .{ .name = "John", .age = 20, .role = .admin },
    .{ .name = "Jane", .age = 21, .role = .member },
};

const zx = @import("zx");