'use strict';

const React = require('react');
const UI = require('../UI.cjs');
const useDayPicker = require('../useDayPicker.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }

const React__default = /*#__PURE__*/_interopDefaultCompat(React);

/**
 * Render the navigation toolbar with buttons to navigate between months.
 *
 * @group Components
 * @see https://daypicker.dev/guides/custom-components
 */
function Nav(props) {
    const { onPreviousClick, onNextClick, previousMonth, nextMonth, ...navProps } = props;
    const { components, classNames, labels: { labelPrevious, labelNext }, } = useDayPicker.useDayPicker();
    const handleNextClick = React.useCallback((e) => {
        if (nextMonth) {
            onNextClick?.(e);
        }
    }, [nextMonth, onNextClick]);
    const handlePreviousClick = React.useCallback((e) => {
        if (previousMonth) {
            onPreviousClick?.(e);
        }
    }, [previousMonth, onPreviousClick]);
    return (React__default.createElement("nav", { ...navProps },
        React__default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI.UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick },
            React__default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.UI.Chevron], orientation: "left" })),
        React__default.createElement(components.NextMonthButton, { type: "button", className: classNames[UI.UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick },
            React__default.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, orientation: "right", className: classNames[UI.UI.Chevron] }))));
}

exports.Nav = Nav;
