import React from 'react';
import PropTypes from 'prop-types';
import { StyledContainer, StyledRectangleLoader } from './StyledPeopleCatalogLoader';
import { inject, observer } from 'mobx-react';

const PeopleCatalogLoader = ({ id, className, style, showText, ...rest }) => {
  return (
    <StyledContainer id={id} className={className} style={style} showText={showText}>
      <StyledRectangleLoader {...rest} />
      <StyledRectangleLoader {...rest} />
      <StyledRectangleLoader {...rest} />
      <StyledRectangleLoader {...rest} />
      <StyledRectangleLoader {...rest} />
      <StyledRectangleLoader {...rest} />
      <StyledRectangleLoader {...rest} />
      <StyledRectangleLoader {...rest} />
    </StyledContainer>
  );
};

PeopleCatalogLoader.propTypes = {
  id: PropTypes.string,
  className: PropTypes.string,
  style: PropTypes.object,
  showText: PropTypes.bool,
};

PeopleCatalogLoader.defaultProps = {
  id: undefined,
  className: undefined,
  style: undefined,
};

export default inject(({ auth }) => ({ showText: auth.settingsStore.showText }))(
  observer(PeopleCatalogLoader),
);