import { clsx } from 'clsx';
import { useIntl } from 'react-intl';
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 { ChevronLeft, ChevronDown, ChevronRight } from '@transferwise/icons';
import 'react';
import '../../common/closeButton/CloseButton.messages.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import '@transferwise/neptune-validation';
import '../../provider/direction/DirectionProvider.mjs';
import { useLayout } from '../../common/hooks/useLayout/useLayout.mjs';
import Title from '../../title/Title.mjs';
import messages from '../DateLookup.messages.mjs';
import Button from '../../button/Button.mjs';
import IconButton from '../../iconButton/IconButton.mjs';

const DateHeader = ({
  label,
  onLabelClick,
  onPreviousClick,
  onNextClick,
  dateMode
}) => {
  const intl = useIntl();
  const {
    isMobile
  } = useLayout();
  return /*#__PURE__*/jsxs("div", {
    className: clsx('text-xs-center', !isMobile && ['clearfix', 'p-y-1']),
    children: [/*#__PURE__*/jsx("div", {
      className: "pull-left-single-direction",
      children: /*#__PURE__*/jsx(IconButton, {
        size: 40,
        priority: "minimal",
        className: "d-inline-flex",
        "aria-label": `${intl.formatMessage(messages.previous)} ${dateMode}`,
        onClick: onPreviousClick,
        children: /*#__PURE__*/jsx(ChevronLeft, {
          className: "left-single-direction"
        })
      })
    }), label && /*#__PURE__*/jsx(Title, {
      type: Typography.TITLE_BODY,
      className: "tw-date-lookup-header-current-container",
      children: /*#__PURE__*/jsx(Button, {
        v2: true,
        size: "md",
        type: "button",
        priority: "tertiary",
        className: "tw-date-lookup-header-current",
        "aria-label": intl.formatMessage(messages.goTo20YearView),
        addonEnd: {
          type: 'icon',
          value: /*#__PURE__*/jsx(ChevronDown, {})
        },
        onClick: onLabelClick,
        children: label
      })
    }), /*#__PURE__*/jsx("div", {
      className: "pull-right-single-direction",
      children: /*#__PURE__*/jsx(IconButton, {
        size: 40,
        className: "d-inline-flex",
        "aria-label": `${intl.formatMessage(messages.next)} ${dateMode}`,
        priority: "minimal",
        onClick: onNextClick,
        children: /*#__PURE__*/jsx(ChevronRight, {
          className: "right-single-direction"
        })
      })
    })]
  });
};

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