import cx from "../../../../../utils/css/cx.js";
import { useContainerBreakpointIsAtMost, useContainerBreakpointIsAtLeast } from "../../../../../hooks/breakpoint/index.js";
import { IfActive } from "../../../../application/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const HeadingDelegates = function HeadingDelegates() {
  const isAtMostXs = useContainerBreakpointIsAtMost('xs');
  const isAtLeastMd = useContainerBreakpointIsAtLeast('md');
  return <div role="columnheader" className={cls('heading-count')}>
      <span>{isAtLeastMd ? 'Delegates' : 'Del'}</span>
      <IfActive active={isAtMostXs}>
        <br />
      </IfActive>
      <span>&nbsp;won</span>
    </div>;
};
export default HeadingDelegates;