import cx from "../../../../utils/css/cx.js";
import { formatNumber } from "../../../../utils/election/index.js";
import ElectionIcon from "../../ElectionIcon/index.js";
import IfActive from "../../../application/IfActive/index.js";
import { useContainerResponsiveValues } from "../../../../hooks/breakpoint/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const Label = function Label(props) {
  const {
    count,
    total,
    labelFormat,
    name,
    party,
    notUp,
    isSecondary,
    hideNotUpLabels,
    isWinner,
    noWrapLabel
  } = props;
  const pct = count === 0 ? 0 : count / total;
  const num = labelFormat === 'percent' ? formatNumber(pct, {
    format: 'percent'
  }) : count;
  const iconSize = useContainerResponsiveValues({
    xxs: '4',
    lg: '5'
  });
  return <div className={cls('label', party, {
    isSecondary,
    noWrapLabel
  })}>
      <div className={cls('name')}>
        <span>
          {name}
        </span>
        <IfActive active={isWinner}>
          <ElectionIcon type="OutcomeWin" size={iconSize} />
        </IfActive>
      </div>

      <div className={cls('number', {
      isSecondary
    })}>
        {num}
      </div>

      <IfActive active={!!notUp && !hideNotUpLabels}>
        <div className={cls('notUp')}>
          {`${notUp} seats not up`}
        </div>
      </IfActive>
    </div>;
};
export default Label;