import ContestInfoTag from "../../../ContestInfoTag/index.js";
import ResultsVoteIn from "../../../ResultsVoteIn/index.js";
import { useContestStatus } from "../../../../../hooks/election/index.js";
import { IfActive } from "../../../../application/index.js";
import { useContainerBreakpointIsAtLeast } from "../../../../../hooks/breakpoint/index.js";
import classnames from 'classnames';
import classes from './styles.module.scss';
const ContestMeta = function ContestMeta(props) {
  const {
    contestId,
    districtTitleStyle
  } = props;
  const contestStatus = useContestStatus(contestId);
  const {
    outcome
  } = contestStatus;
  const isMd = useContainerBreakpointIsAtLeast('md');
  const size = isMd ? '100' : '000';
  return <div className={classnames(classes.container, {
    [classes['district-title-style']]: districtTitleStyle
  })}>
      <ContestInfoTag contestId={contestId} size={size} />
      <IfActive active={outcome !== 'winner'}>
        <ResultsVoteIn id={contestId} format="short" />
      </IfActive>
    </div>;
};
export default ContestMeta;