'use strict';

var clsx = require('clsx');
var reactIntl = require('react-intl');
var Chevron = require('../../chevron/Chevron.js');
require('../../common/theme.js');
require('../../common/direction.js');
require('../../common/propsValues/control.js');
require('../../common/propsValues/breakpoint.js');
var size = require('../../common/propsValues/size.js');
var typography = require('../../common/propsValues/typography.js');
require('../../common/propsValues/width.js');
require('../../common/propsValues/type.js');
require('../../common/propsValues/dateMode.js');
require('../../common/propsValues/monthFormat.js');
var position = require('../../common/propsValues/position.js');
require('../../common/propsValues/layouts.js');
require('../../common/propsValues/status.js');
require('../../common/propsValues/sentiment.js');
require('../../common/propsValues/profileType.js');
require('../../common/propsValues/variant.js');
require('../../common/propsValues/scroll.js');
require('../../common/propsValues/markdownNodeType.js');
require('../../common/fileType.js');
require('@transferwise/icons');
require('react');
require('../../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
require('@transferwise/neptune-validation');
require('../../provider/direction/DirectionProvider.js');
var useLayout = require('../../common/hooks/useLayout/useLayout.js');
var Title = require('../../title/Title.js');
var DateLookup_messages = require('../DateLookup.messages.js');

const buttonClasses = 'btn-link p-a-0 text-no-decoration np-text-body-large-bold rounded-sm';
const DateHeader = ({
  label,
  onLabelClick,
  onPreviousClick,
  onNextClick,
  dateMode
}) => {
  const intl = reactIntl.useIntl();
  const {
    isMobile
  } = useLayout.useLayout();
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: clsx.clsx('text-xs-center', !isMobile && ['clearfix', 'p-y-1']),
    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
      className: "pull-left-single-direction",
      children: /*#__PURE__*/jsxRuntime.jsx("button", {
        type: "button",
        className: `d-inline-flex ${buttonClasses}`,
        "aria-label": `${intl.formatMessage(DateLookup_messages.previous)} ${dateMode}`,
        onClick: onPreviousClick,
        children: /*#__PURE__*/jsxRuntime.jsx(Chevron, {
          orientation: position.Position.LEFT,
          className: "left-single-direction",
          size: size.Size.MEDIUM
        })
      })
    }), label && /*#__PURE__*/jsxRuntime.jsx(Title, {
      type: typography.Typography.TITLE_BODY,
      className: "tw-date-lookup-header-current-container",
      children: /*#__PURE__*/jsxRuntime.jsx("button", {
        type: "button",
        className: `tw-date-lookup-header-current ${buttonClasses}`,
        "aria-label": intl.formatMessage(DateLookup_messages.goTo20YearView),
        onClick: onLabelClick,
        children: label
      })
    }), /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "pull-right-single-direction",
      children: /*#__PURE__*/jsxRuntime.jsx("button", {
        type: "button",
        className: `d-inline-flex ${buttonClasses}`,
        "aria-label": `${reactIntl.useIntl().formatMessage(DateLookup_messages.next)} ${dateMode}`,
        onClick: onNextClick,
        children: /*#__PURE__*/jsxRuntime.jsx(Chevron, {
          orientation: position.Position.RIGHT,
          className: "right-single-direction",
          size: size.Size.MEDIUM
        })
      })
    })]
  });
};

module.exports = DateHeader;
//# sourceMappingURL=DateHeader.js.map
