import classnames from 'classnames';
import { useCandidateResults } from "../../../../hooks/election/index.js";
import { getFormattedCandidateVotes } from "../../../../utils/election/index.js";
import { useShouldAnimate } from "../../../../hooks/election/useAnimateDataChanges/index.js";
import classes from './styles.module.scss';
import { useResultsTableFormatContext } from '../context';
const VoteBar = function VoteBar(props) {
  const {
    id,
    candidateId
  } = props;
  const {
    size
  } = useResultsTableFormatContext();
  const shouldAnimate = useShouldAnimate();
  const results = useCandidateResults(id, candidateId);
  const percent = getFormattedCandidateVotes(results, {
    format: 'percent'
  });
  return <span className={classes.container} aria-hidden>
      <span className={classnames(classes.bar, classes[size], {
      [classes.animate]: shouldAnimate
    })} style={{
      width: percent
    }} />

    </span>;
};
export default VoteBar;