import classnames from 'classnames';
import ElectionIcon from "../../ElectionIcon/index.js";
import IfActive from "../../../application/IfActive/index.js";
import ContestInfoTag from "../../ContestInfoTag/index.js";
import ElectionLink from "../../ElectionLink/index.js";
import classes from './styles.module.scss';
import Description from './Description';
import { useLeaderboardFormatContext } from '../context';
import Title from './Title';
const Header = function Header(props) {
  const {
    contestId,
    link,
    showLinkArrow
  } = props;
  const {
    size,
    format,
    contestInfoTagSize,
    showRating
  } = useLeaderboardFormatContext();
  return <ElectionLink to={link} tracking={{
    context: 'Leaderboard:Header',
    linkName: contestId
  }}>
      <div className={classnames(classes.container, classes[format], classes[size], {
      [classes.link]: showLinkArrow
    })}>
        <div className={classes['left-container']}>
          <Title contestId={contestId} />
          <Description contestId={contestId} />
        </div>
        <div className={classes['right-container']}>
          <ContestInfoTag size={contestInfoTagSize} showRating={showRating} contestId={contestId} />
          <IfActive active={showLinkArrow}>
            <span className={classes.link}>
              <ElectionIcon type="LinkCaret" size="3" color="currentColor" />
            </span>
          </IfActive>
        </div>
      </div>
    </ElectionLink>;
};
export default Header;