import React from 'react';
import PropTypes from 'prop-types';
import { Button } from 'coral-ui';
import t from 'coral-framework/services/i18n';
import cn from 'classnames';

class LoadMore extends React.Component {
  render() {
    const { loadingState, loadMore } = this.props;
    const disabled = loadingState === 'loading';
    return (
      <div className="talk-load-more">
        <Button
          onClick={loadMore}
          className={cn('talk-load-more-button', {
            [`talk-load-more-button-${loadingState}`]: loadingState,
          })}
          disabled={disabled}
        >
          {t('framework.view_more_comments')}
        </Button>
      </div>
    );
  }
}

LoadMore.propTypes = {
  loadMore: PropTypes.func.isRequired,
  loadingState: PropTypes.oneOf(['', 'loading', 'success', 'error']),
};

export default LoadMore;