(defisland
  ()
  (let
    ((running (signal false))
      (elapsed (signal 0))
      (time-text (create-text-node "0.0s"))
      (btn-text (create-text-node "Start"))
      (_e1
        (effect
          (fn
            ()
            (when
              (deref running)
              (let
                ((id (set-interval (fn () (swap! elapsed inc)) 100)))
                (fn () (clear-interval id)))))))
      (_e2
        (effect
          (fn
            ()
            (let
              ((e (deref elapsed)))
              (dom-set-text-content
                time-text
                (str (floor (/ e 10)) "." (mod e 10) "s"))))))
      (_e3
        (effect
          (fn
            ()
            (dom-set-text-content
              btn-text
              (if (deref running) "Stop" "Start"))))))
    (div
      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
      (div
        (~tw :tokens "flex items-center gap-4")
        (span
          (~tw :tokens "font-mono text-2xl font-bold text-violet-900 w-24 text-center")
          time-text)
        (button
          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
          :on-click (fn (e) (swap! running not))
          btn-text)
        (button
          (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
          :on-click (fn (e) (do (reset! running false) (reset! elapsed 0)))
          "Reset")))))
