import React from 'react';
import { Provider } from 'react-redux';
import QSMConfigurationContext from './qsm-configuration-context';
import { QSMConfiguration } from './types';
import QSMContainer from './components/QSMContainer/qsm-container';
import { createQSMStore } from './store/qsm-store';

interface QSMProps {
  configuration: QSMConfiguration;
}

const QSM: React.FC<QSMProps> = ({ configuration }) => {
  const store = React.useMemo(() => createQSMStore(), []);

  return (
    <div id="booking-qsm">
      <Provider store={store}>
        <QSMConfigurationContext.Provider value={configuration}>
          <QSMContainer />
        </QSMConfigurationContext.Provider>
      </Provider>
    </div>
  );
};

export default QSM;