import React, { FunctionComponent, PropsWithChildren } from 'react';
import cn from 'classnames';

import { Breadcrumbs } from '../Breadcrumbs';
import { LoadingOverlay } from '../Loading-Overlay';
import { PageContainerProps } from './types.d';

/**
 * Using for wrap page inside the page wrapper under sidebar
 */

export const PageContainer: FunctionComponent<PropsWithChildren<PageContainerProps>> = ({
  breadcrumbs,
  children,
  className = '',
  loading,
  minimized = false,
}): React.ReactElement => {
  const classNames = cn({
    page__container: true,
    [className]: !!className,
    minimized,
  });

  return (
    <div className={classNames}>
      <div className="page__content">
        {breadcrumbs ? (
          <div className="square-ui-page-content-path">
            <Breadcrumbs data={breadcrumbs} />
          </div>
        ) : null}
        <LoadingOverlay isVisible={loading.isLoading} blur={loading.backdropBlur} minimized={minimized} />
        {children}
      </div>
    </div>
  );
};
