import { clsx } from 'clsx';
import { useIntl } from 'react-intl';
import Chevron from '../../chevron/Chevron.mjs';
import Title from '../../title/Title.mjs';
import messages from '../DateLookup.messages.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useLayout } from '../../common/hooks/useLayout/useLayout.mjs';
import { Position } from '../../common/propsValues/position.mjs';
import { Size } from '../../common/propsValues/size.mjs';
import { Typography } from '../../common/propsValues/typography.mjs';

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 = 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("button", {
        type: "button",
        className: `d-inline-flex ${buttonClasses}`,
        "aria-label": `${intl.formatMessage(messages.previous)} ${dateMode}`,
        onClick: onPreviousClick,
        children: /*#__PURE__*/jsx(Chevron, {
          orientation: Position.LEFT,
          className: "left-single-direction",
          size: Size.MEDIUM
        })
      })
    }), label && /*#__PURE__*/jsx(Title, {
      type: Typography.TITLE_BODY,
      className: "tw-date-lookup-header-current-container",
      children: /*#__PURE__*/jsx("button", {
        type: "button",
        className: `tw-date-lookup-header-current ${buttonClasses}`,
        "aria-label": intl.formatMessage(messages.goTo20YearView),
        onClick: onLabelClick,
        children: label
      })
    }), /*#__PURE__*/jsx("div", {
      className: "pull-right-single-direction",
      children: /*#__PURE__*/jsx("button", {
        type: "button",
        className: `d-inline-flex ${buttonClasses}`,
        "aria-label": `${useIntl().formatMessage(messages.next)} ${dateMode}`,
        onClick: onNextClick,
        children: /*#__PURE__*/jsx(Chevron, {
          orientation: Position.RIGHT,
          className: "right-single-direction",
          size: Size.MEDIUM
        })
      })
    })]
  });
};

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