var count = zx.signal(i128, 0);

pub fn CounterComponent(ctx: *zx.ComponentCtx(struct { count: i128 })) zx.Component {
    count.set(ctx.props.count);

    return (
        <div @allocator={ctx.allocator}>
            <button onclick={handleReset}>Reset</button>
            <h5>{&count}</h5>
            <button onclick={handleDecrement}>Decrement</button>
            <button onclick={handleIncrement}>Increment</button>
        </div>
    );
}

fn handleIncrement(_: zx.EventContext) void {
    count.set(count.get() + 1);
    fetch("?increment=true");
}

fn handleDecrement(_: zx.EventContext) void {
    count.set(count.get() - 1);
    fetch("?decrement=true");
}

fn handleReset(_: zx.EventContext) void {
    count.set(0);
    fetch("?reset=true");
}

fn fetch(url: []const u8) void {
    _ = zx.fetch(.noop, zx.client_allocator, url, .{}) catch {};
}

const zx = @import("zx");
