XState

import { createMachine, createActor } from 'xstate';

// Auth state machine
const authMachine = createMachine({
  id: 'auth',
  initial: 'idle',
  states: {
    idle: {
      on: { LOGIN: 'loading' },
    },
    loading: {
      invoke: {
        src: 'loginUser',
        onDone: 'authenticated',
        onError: 'error',
      },
    },
    authenticated: {
      on: { LOGOUT: 'idle' },
    },
    error: {
      on: { RETRY: 'loading' },
    },
  },
}, {
  actions: {},
  services: {
    loginUser: async (context, event) => {
      return await api.login(event.credentials);
    },
  },
});

// Start the machine
const actor = createActor(authMachine);
actor.start();

// Send events
actor.send({ type: 'LOGIN', credentials: { email, password } });

// Subscribe to state changes
actor.subscribe((state) => {
  console.log('Current state:', state.value);
});

// React hook
import { useMachine } from '@xstate/react';

function LoginButton() {
  const [state, send] = useMachine(authMachine);

  return (
    <>
      {state.matches('idle') && (
        <button onClick={() => send({ type: 'LOGIN' })}>
          تسجيل الدخول
        </button>
      )}
      {state.matches('loading') && <p>جاري الدخول...</p>}
      {state.matches('authenticated') && <p>مرحباً!</p>}
      {state.matches('error') && (
        <button onClick={() => send({ type: 'RETRY' })}>
          إعادة المحاولة
        </button>
      )}
    </>
  );
}