import PropTypes from 'prop-types';
import TagInner from './TagInner';
import typography from './typography.module.scss';

/**
 * A styled tag that shows a contest's status,
 * or its election forecast rating before there is an outcome.
 *
 * The component will return either a "flip", "held", "recount" or "runoff" tag.
 * If the contest does not yet have an outcome the component will return
 * a styled election forecast rating. This can be disabled with the `showRating` prop.
 *
 * The component also comes in sizes corresponding to our typography sizes. Note that at
 * the `000` size, "recount" and "runoff" become icon-only, and "flip" becomes text-only.
 *
 */

// Calls get contest status function
// and returns the appropriate type of tag based on that
const ContestInfoTag = function ContestInfoTag(props) {
  const {
    contestId,
    size,
    showRating
  } = props;
  return <span className={typography[`text-${size}`]}>
      <TagInner contestId={contestId} showRating={showRating} size={size} />
    </span>;
};
ContestInfoTag.defaultProps = {
  showRating: true,
  size: '200'
};
ContestInfoTag.propTypes = {
  /**
   * The ID of the contest of which you're displaying the status
   */
  contestId: PropTypes.string.isRequired,
  /**
   * The size at which to display the status
   */
  size: PropTypes.oneOf(['000', '100', '200', '300', '400', '500']),
  /**
    * Whether or not to show the contest's rating
    */
  showRating: PropTypes.bool
};
export default ContestInfoTag;