import ContestName from "../../../ContestName/index.jsx";
import ContestType from "../../../ContestType/index.js";
import classnames from 'classnames';
import ContestElectoralVotes from "../../../ContestElectoralVotes/index.js";
import { IfActive } from "../../../../application/index.js";
import classes from './styles.module.scss';
import { useLeaderboardFormatContext } from '../../context';
import typography from '../../typography.module.scss';
const Title = function Title(props) {
  const {
    contestId,
    contestName: customName,
    as: Tag
  } = props;
  const {
    contestNameFormat,
    contestTypeFormat
  } = useLeaderboardFormatContext();
  return <Tag className={classes.container}>
      <span className={classnames(classes['name-container'], typography.title)}>
        <IfActive active={!customName}>
          <ContestName id={contestId} format={contestNameFormat} />
        </IfActive>
        {customName}
      </span>
      <IfActive active={!customName}>
        <span className={classnames(classes['contest-secondary'], typography['contest-secondary'])}>
          {' '}
          <ContestType id={contestId} format={contestTypeFormat} />
          <span className={classes.evs}>
            <ContestElectoralVotes id={contestId} format="short" />
          </span>
        </span>
      </IfActive>
    </Tag>;
};
Title.defaultProps = {
  as: 'h3' // Defaulting to h3 because our module titles are h2
};

export default Title;