import React, { createContext, useContext } from 'react';
import usePersistentState from '../hooks/usePersistentState';

const AnimationContext = createContext();

export const AnimationProvider = ({ children }) => {
  // We use the existing key but invert the logic mentally or rename it.
  // Let's use a new key for clarity: reduceMotion
  const [reduceMotion, setReduceMotion] = usePersistentState(
    'reduceMotion',
    false,
  );

  const toggleReduceMotion = () => {
    setReduceMotion((prev) => !prev);
  };

  return (
    <AnimationContext.Provider
      value={{
        reduceMotion,
        toggleReduceMotion,
      }}
    >
      {children}
    </AnimationContext.Provider>
  );
};

export const useAnimation = () => {
  return useContext(AnimationContext);
};