import React, { forwardRef, useCallback } from "react";
import { StyledNavBarButton } from "./Styles";
import { ArrowRightIcon } from "../Icons";
import ArrowLeftIcon from "../Icons/collection/ArrowLeft";
export const NavBarElement = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    onPreviousClick,
    onNextClick
  } = _ref;
  const onPrevious = useCallback(() => {
    onPreviousClick();
  }, [onPreviousClick]);
  const onNext = useCallback(() => {
    onNextClick();
  }, [onNextClick]);
  return /*#__PURE__*/React.createElement("div", {
    className: "c-DayPicker-NavBar",
    ref: ref,
    tabIndex: 0
  }, /*#__PURE__*/React.createElement(StyledNavBarButton, {
    type: "button",
    variant: "text gray",
    size: "small",
    tabIndex: 0,
    onClick: onPrevious,
    $direction: "previous"
  }, /*#__PURE__*/React.createElement(ArrowLeftIcon, {
    "aria-label": "Previous Month",
    width: "24",
    height: "24"
  })), /*#__PURE__*/React.createElement(StyledNavBarButton, {
    type: "button",
    variant: "text gray",
    size: "small",
    tabIndex: 0,
    onClick: onNext,
    $direction: "next"
  }, /*#__PURE__*/React.createElement(ArrowRightIcon, {
    "aria-label": "Next Month",
    width: "24",
    height: "24"
  })));
});
NavBarElement.displayName = "NavBarElement";
//# sourceMappingURL=NavBarElement.js.map