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

const MixersContext = createContext();

export const MixersProvider = ({ children }) => {
  const mixerHelper = useMixerHelper();

  // Memoize context value to prevent unnecessary re-renders of consumers
  const value = useMemo(() => mixerHelper, [mixerHelper]);

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

export const useMixersContext = () => {
  const context = useContext(MixersContext);
  if (!context) {
    throw new Error('useMixersContext must be used within a MixersProvider');
  }
  return context;
};

export default MixersContext;
