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

import { StyledWrapper } from './styled-components';
import { useTheme } from '../Theme';
import { PageWrapperProps } from './types.d';

/**
 * Using for wrap page under the navbar
 */

export const PageWrapper: FunctionComponent<PageWrapperProps> = ({ children, className = '' }): React.ReactElement => {
  const classNames = cn({
    page__wrapper: true,
    [className]: !!className,
  });

  const theme = useTheme();

  return (
    <StyledWrapper $theme={theme} className={classNames}>
      {children}
    </StyledWrapper>
  );
};
