import ContestName from "../../../ContestName/index.jsx";
import ContestType from "../../../ContestType/index.js";
import classnames from 'classnames';
import classes from './styles.module.scss';
import { useLeaderboardFormatContext } from '../../context';
import typography from '../../typography.module.scss';
const Title = function Title(props) {
  const {
    contestId
  } = props;
  const {
    contestNameFormat,
    contestTypeFormat
  } = useLeaderboardFormatContext();
  return <h3 className={classes.container}>
      <span className={classnames(classes['name-container'], typography.title)}>
        <ContestName id={contestId} format={contestNameFormat} />
      </span>
      <span className={classnames(classes['contest-type'], typography['contest-type'])}>
        <ContestType id={contestId} format={contestTypeFormat} />
      </span>
    </h3>;
};
export default Title;