import { AdvancedScrollerAuto, ErrorBoundary } from '@vizality/components';
import { joinClassNames } from '@vizality/util/dom';
import { getModule } from '@vizality/webpack';
import React, { memo } from 'react';

/**
 *
 * @component
 */
export default memo(({ className, wrapperClassName, children }) => {
  const { pageWrapper } = getModule('pageWrapper');
  const { perksModal } = getModule('perksModal');
  const { content } = getModule('wrappedLayout');
  return (
    <div className={joinClassNames('vz-dashboard', wrapperClassName, pageWrapper, perksModal)}>
      <AdvancedScrollerAuto className='vz-dashboard-scroller'>
        <div className={joinClassNames('vz-dashboard-layout', className)}>
          <ErrorBoundary
            className='vz-dashboard-error-boundary'
            headerClassName={joinClassNames('vz-dashboard-content-header', content)}
            showScene={true}
          >
            {children}
          </ErrorBoundary>
        </div>
      </AdvancedScrollerAuto>
    </div>
  );
});
