import { clsx } from 'clsx';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '@transferwise/neptune-tokens';
import '../common/propsValues/control.mjs';
import '../common/propsValues/size.mjs';
import { Typography } from '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import '@transferwise/formatting';
import '@transferwise/icons';
import React__default, { useRef, useEffect } from 'react';
import 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';
import Link from '../link/Link.mjs';
import Title from '../title/Title.mjs';

const HeaderAction = /*#__PURE__*/React__default.forwardRef(({
  action
}, ref) => {
  return /*#__PURE__*/jsx(Link, {
    className: "np-header__action-button",
    "aria-label": action['aria-label'],
    href: 'href' in action ? action.href : undefined,
    target: 'target' in action ? action.target : undefined,
    disabled: action.disabled,
    onClick: action.onClick,
    children: action.text
  });
});
HeaderAction.displayName = 'HeaderAction';
/**
 * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.
 * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.
 * @param {string} title - Required prop to set the title of the section header.
 * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.
 * @param {string} [className]
 * @param {string} [testId]
 *
 * @see {@link Header } for further information.
 * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}
 */
const Header = /*#__PURE__*/React__default.forwardRef(({
  as = 'h5',
  action,
  className,
  testId,
  title,
  level = 'group',
  ...props
}, ref) => {
  const internalRef = useRef(null);
  const levelTypography = level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;
  const headerClasses = clsx('np-header', className, {
    'np-header--group': level === 'group'
  });
  const commonProps = {
    className: headerClasses,
    'data-testid': testId
  };
  useEffect(() => {
    if (as === 'legend' && internalRef.current) {
      const {
        parentElement
      } = internalRef.current;
      if (parentElement?.tagName.toLowerCase() !== 'fieldset') {
        console.warn('Legends should be the first child in a fieldset, and this is not possible when including an action');
      }
    }
  }, [as]);
  if (!action) {
    return /*#__PURE__*/jsx(Title, {
      ref: internalRef,
      as: as,
      type: levelTypography,
      ...commonProps,
      ...props,
      children: title
    });
  }
  return /*#__PURE__*/jsxs("div", {
    ...commonProps,
    ...props,
    ref: ref,
    children: [/*#__PURE__*/jsx(Title, {
      as: as,
      type: levelTypography,
      className: "np-header__title",
      children: title
    }), /*#__PURE__*/jsx(HeaderAction, {
      action: action
    })]
  });
});
Header.displayName = 'Header';

export { Header as default };
//# sourceMappingURL=Header.mjs.map
