text: // @flow
  import React from 'preact-compat';
  import arrowDown from 'svgs/icon/arrow-down.svg';
  import arrowUp from 'svgs/icon/arrow-up.svg';
  
  type ExpanderButtonText = {
      more: string,
      less: string,
  };
  
  type ExpanderButtonProps = {
      isExpanded: boolean,
      onToggle: (state: boolean) => void,
      linkName: ?string,
      text: ?ExpanderButtonText,
  };
  
  const defaultExpanderButtonText = {
      more: 'More',
      less: 'Less',
  };
  
  const FollowCardExpanderButton = ({
      isExpanded,
      onToggle,
      linkName,
      text,
  }: ExpanderButtonProps) =>
      isExpanded ? (
          <button
              data-link-name={linkName ? `${linkName} : shrink` : null}
              className="manage-account__button manage-account__button--secondary manage-account__button--icon"
              onClick={() => onToggle(false)}>
              {(text || defaultExpanderButtonText).less}
              <span
                  className="manage-account__button-react-icon"
                  dangerouslySetInnerHTML={{ __html: arrowUp.markup }}
              />
          </button>
      ) : (
          <button
              data-link-name={linkName ? `${linkName} : expand` : null}
              className="manage-account__button manage-account__button--secondary manage-account__button--icon"
              onClick={() => onToggle(true)}>
              {(text || defaultExpanderButtonText).more}
              <span
                  className="manage-account__button-react-icon"
                  dangerouslySetInnerHTML={{ __html: arrowDown.markup }}
              />
          </button>
      );
  export { FollowCardExpanderButton };
  