import cx from "../../../../../utils/css/cx.js";
import ElectionIcon from "../../../ElectionIcon/index.js";
import { useTrackStandardEvent } from "../../../../../hooks/tracking/index.js";
import useA11yOnClick from "../../../../../hooks/useA11yOnClick/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const ExpandRow = function ExpandRow(props) {
  const {
    isExpanded,
    setIsExpanded
  } = props;
  const text = isExpanded ? 'Collapse' : 'Expand';
  const buttonIconType = isExpanded ? 'Collapse' : 'Expand';
  const track = useTrackStandardEvent({
    component: 'DelegateCounterOvertime'
  });
  const clickHandler = useA11yOnClick(() => {
    setIsExpanded(prev => {
      const next = !prev;
      track({
        event: next ? 'expand' : 'collapse'
      });
      return next;
    });
  }, [setIsExpanded, track]);
  return <div role="row" className={cls('expand-row')}>
      <div role="cell">
        <div className={cls('button')} {...clickHandler}>
          <ElectionIcon type={buttonIconType} color="warmgray-60" size="4" />
          {text}
        </div>
      </div>
    </div>;
};
export default ExpandRow;