import PropTypes from 'prop-types';
import classnames from 'classnames';
import IfActive from "../../../application/IfActive/index.js";
import { useContestMetadata } from "../../../../hooks/election/index.js";
import { useResultsTableFormatContext } from '../context';
import typography from '../typography.module.scss';
import classes from './styles.module.scss';
const Header = function Header(props) {
  const {
    id
  } = props;
  const {
    showVotes,
    size,
    hasRowPaddingRight
  } = useResultsTableFormatContext();
  const metadata = useContestMetadata(id);
  if (!showVotes) {
    // Not needed if we don't need to label the votes column
    return null;
  }
  if (!metadata || metadata.isUncontested) {
    return null;
  }
  return <div role="rowgroup">
      <div role="row">
        <div role="columnheader" className={classes.visuallyHidden}>
          Candidate
        </div>
        <IfActive active={showVotes}>
          <div role="columnheader" className={classnames(classes.text, classes[size], typography.label)}>
            Votes
          </div>
        </IfActive>
        <div role="columnheader" className={classnames(classes.text, classes[size], typography.label, {
        [classes.paddingRight]: hasRowPaddingRight
      })}>
          Pct.
        </div>
      </div>
    </div>;
};
Header.propTypes = {
  id: PropTypes.string.isRequired
};
export default Header;