import cx from "../../../../../utils/css/cx.js";
import formatNumber from "../../../../../utils/election/formatNumber/index.js";
import { useContainerBreakpointIsAtMost } from "../../../../../hooks/breakpoint/index.js";
import { IfActive } from "../../../../application/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const HeadingThreshold = function HeadingThreshold(props) {
  const {
    threshold,
    anyMetThreshold
  } = props;
  const isAtMostXs = useContainerBreakpointIsAtMost('xs');
  return <div role="columnheader" className={cls('heading-threshold')} aria-hidden>
      <IfActive active={threshold && !anyMetThreshold}>
        <span>{formatNumber(threshold)}</span>
        <IfActive active={isAtMostXs}>
          <br />
        </IfActive>
        <span> threshold</span>
      </IfActive>
    </div>;
};
export default HeadingThreshold;