import 'react';
import { clsx } from 'clsx';
import { ChevronUp } from '@transferwise/icons';
import IconButton from '../../../iconButton/IconButton.mjs';
import { useIntl } from 'react-intl';
import messages from './Expander.messages.mjs';
import { jsx } from 'react/jsx-runtime';

// Reusable toggle button component
const ExpanderToggle = ({
  expanded,
  onToggle,
  size = 24,
  className,
  'data-testid': testId
}) => {
  const intl = useIntl();
  return /*#__PURE__*/jsx(IconButton, {
    size: size,
    priority: "secondary",
    "aria-label": intl.formatMessage(expanded ? messages.collapseAriaLabel : messages.expandAriaLabel),
    "aria-expanded": expanded,
    className: clsx('wds-expander-toggle', {
      'wds-expander-toggle--collapsed': !expanded
    }, className),
    "data-testid": testId,
    onClick: onToggle,
    children: /*#__PURE__*/jsx(ChevronUp, {})
  });
};

export { ExpanderToggle };
//# sourceMappingURL=Expander.mjs.map
