import React, { createContext, useContext, useMemo } from 'react';
import { vuStore } from '../stores/vuStore';
import useVuHelpers from '../hooks/useVuHelpers.js';

const VuContext = createContext();

export const VuProvider = ({ children }) => {
  const vuHelpers = useVuHelpers();

  // Memoize context value to prevent unnecessary re-renders
  // vuStore is a stable module-level reference, doesn't need to be a dependency
  const value = useMemo(() => ({
    ...vuHelpers,
    vuStore,
  }), [vuHelpers]);

  return (
    <VuContext.Provider value={value}>
      {children}
    </VuContext.Provider>
  );
};

export const useVuContext = () => {
  const context = useContext(VuContext);
  if (!context) {
    throw new Error('useVuContext must be used within a VuProvider');
  }
  return context;
};

export default VuContext;
