import PropTypes from 'prop-types';
import ResultsVoteIn from "../../ResultsVoteIn/index.js";
import ContestIncumbentLabel from "../../ContestIncumbentLabel/index.jsx";
import IfActive from "../../../application/IfActive/index.js";
import classnames from 'classnames';
import ContestRecountStatus from "../../ContestRecountStatus/index.js";
import classes from './styles.module.scss';
import { useResultsTableFormatContext } from '../context';
import typography from '../typography.module.scss';
const Footer = function Footer(props) {
  const {
    id
  } = props;
  const {
    showRecountStatus,
    voteInFormat,
    size,
    format
  } = useResultsTableFormatContext();
  return <div role="rowgroup">
      <div role="row">
        <div role="cell" className={classnames(classes.container, classes[size], {
        [classes.line]: format === 'condensed'
      })}>
          <div className={classes.leftContainer}>
            <span className={typography.label}>
              <ContestIncumbentLabel id={id} />
            </span>
          </div>

          <div className={classnames(classes.rightContainer, typography.label)}>
            <IfActive active={showRecountStatus}>
              <ContestRecountStatus id={id} />

            </IfActive>

            <ResultsVoteIn id={id} format={voteInFormat} />
          </div>
        </div>
      </div>
    </div>;
};
Footer.defaultProps = {};
Footer.propTypes = {
  id: PropTypes.string.isRequired
};
export default Footer;