text: import { createMachine, assign } from "xstate";
  
  export const timerMachine = createMachine({
    initial: "idle",
    context: {
      duration: 60,
      elapsed: 0,
      interval: 0.1,
    },
    states: {
      idle: {
        // What's the difference using actions property like on ADD_MINUTE event?
        // And not using it like on entry property below?
        entry: assign({
          duration: 60,
          elapsed: 0,
        }),
        on: {
          TOGGLE: "running",
        },
      },
      running: {
        on: {
          TOGGLE: "paused",
          ADD_MINUTE: {
            actions: assign({
              duration: (ctx, _e) => ctx.duration + 60,
            }),
          },
        },
      },
      paused: {
        on: {
          TOGGLE: "running",
          RESET: "idle",
        },
      },
    },
  });
  