import { useState, useEffect } from 'react';
import * as LocalStorageManager from '../utils/LocalStorageManager';

/**
 * A custom hook that uses useState and persists the state to localStorage.
 *
 * @param {string} key The key to use in localStorage.
 * @param {*} defaultValue The default value to use if nothing is in localStorage.
 * @returns A stateful value, and a function to update it.
 */
const usePersistentState = (key, defaultValue) => {
  const [state, setState] = useState(() =>
    LocalStorageManager.get(key, defaultValue),
  );

  useEffect(() => {
    LocalStorageManager.set(key, state);
  }, [key, state]);

  return [state, setState];
};

export default usePersistentState;