component App {
  state {
    counter: Int = 0
    input_text: String = ""
  }

  fn increment(widget: Int, data: String) -> Void {
    state.counter = state.counter + 1
    widget_set_text(g_w_count_label, str_concat("Count: ", int_to_str(g_counter)))
  }

  fn on_name_change(widget: Int, data: String) -> Void {
    state.input_text = data
    widget_set_disabled(g_w_btn_greet, str_len(g_input_text) == 0)
  }

  template {
    <vstack spacing=24 padding=20 bg="#0f172a">
      <label text="Hello World" style="heading" />
      <hstack spacing=8>
        <text_field placeholder="Enter name" on_change=on_name_change flex=1 />
        <button label="Greet" on_click=on_greet_click disabled={str_len(state.input_text) == 0} />
      </hstack>
      <label text="Count: {state.counter}" />
      <button label="Increment" on_click=increment />
    </vstack>
  }
}