import { makeObservable, observable, action } from 'mobx';

class TodoStore {
  todos = [];

  constructor() {
    makeObservable(this, {
      todos: observable,
      addTodo: action,
      toggleTodo: action
    });
  }

  addTodo = (text) => {
    this.todos.push({ id: Date.now(), text, completed: false });
  };

  toggleTodo = (id) => {
    const todo = this.todos.find(todo => todo.id === id);
    if (todo) {
      todo.completed = !todo.completed;
    }
  };
}

export const todoStore = new TodoStore();

import { observer } from 'mobx-react-lite';
import { todoStore } from './stores/TodoStore';

const TodoList = observer(() => {
  return (
    <div>
      <button onClick={() => todoStore.addTodo("New Task")}>Add Todo</button>
      {todoStore.todos.map(todo => (
        <div key={todo.id} onClick={() => todoStore.toggleTodo(todo.id)}>
          {todo.text} - {todo.completed ? "✓" : "○"}
        </div>
      ))}
    </div>
  );
});

import { createContext, useContext } from 'react';

const StoreContext = createContext(null);

export const StoreProvider = ({ children }) => {
  const store = new TodoStore();
  return (
    <StoreContext.Provider value={store}>
      {children}
    </StoreContext.Provider>
  );
};

// Custom hook to use the store
export const useTodoStore = () => {
  const store = useContext(StoreContext);
  if (!store) {
    throw new Error('Using store outside provider!');
  }
  return store;
};

class TodoStore {
  // ... previous code ...

  get completedTodosCount() {
    return this.todos.filter(todo => todo.completed).length;
  }

  constructor() {
    makeObservable(this, {
      // ... previous observables ...
      completedTodosCount: computed
    });
  }
}