import ElectionIcon from "../../ElectionIcon/index.js";
import { useCallback } from 'react';
import IfActive from "../../../application/IfActive/index.js";
import classes from './styles.module.scss';
import getLabel from './getLabel';
const ExpandoButton = function ExpandoButton(props) {
  const {
    isExpanded,
    setIsExpanded,
    expandLabel,
    collapseLabel,
    showLabel,
    size
  } = props;
  const iconType = isExpanded ? 'Collapse' : 'Expand';
  const label = getLabel(isExpanded, expandLabel, collapseLabel);
  const clickHandler = useCallback(() => {
    setIsExpanded(prev => !prev);
  }, [setIsExpanded]);
  return <button className={classes.container} type="button" aria-label={label} onClick={clickHandler}>
      <ElectionIcon type={iconType} color="warmgray-60" size={size} />
      <IfActive active={showLabel}>
        <span className={classes.label}>{label}</span>
      </IfActive>
    </button>;
};
ExpandoButton.defaultProps = {
  size: '3',
  showLabel: true
};
export default ExpandoButton;