import get from 'lodash/get';
import cx from "../../../../utils/css/cx.js";
import CandidateHeadshot from "../../CandidateHeadshot/index.js";
import Bar from './Bar';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const PathsBar = function PathsBar(props) {
  const {
    userPaths,
    candidates,
    userTotals,
    liveRegionId
  } = props;
  return <div className={classes.container}>
      <div className={classes.demHeadshot}>
        <CandidateHeadshot id={get(candidates, 'dem.id')} className={classes.headshot} />
      </div>

      <div className={cls('barContainer')}>
        <div className={cls('bar')}>
          <Bar paths={userPaths} labelPosition="top" totals={userTotals} candidates={candidates} liveRegionId={liveRegionId} />
        </div>
      </div>

      <div className={classes.gopHeadshot}>
        <CandidateHeadshot id={get(candidates, 'gop.id')} className={classes.headshot} />
      </div>
    </div>;
};
export default PathsBar;