import { Button, CircularProgress } from '@material-ui/core';
import { useQuesListStyles } from '../styles/muiStyles';
import AutorenewIcon from '@material-ui/icons/Autorenew';

const LoadMoreButton = ({ handleLoadPosts, loading }) => {
  const classes = useQuesListStyles();

  return (
    <div className={classes.loadBtnWrapper}>
      <Button
        color="primary"
        variant="outlined"
        size="large"
        onClick={handleLoadPosts}
        startIcon={!loading && <AutorenewIcon />}
        className={classes.loadBtn}
        disabled={loading}
      >
        {loading && (
          <CircularProgress
            disableShrink
            size={22}
            style={{ marginRight: '1em' }}
          />
        )}
        {loading ? 'Loading...' : 'Load More'}
      </Button>
    </div>
  );
};

export default LoadMoreButton;