import CustomDayPickerCaption from "./CustomDayPickerCaption";
import format from 'date-fns/format';
import { DayPicker } from 'react-day-picker';
import { ArrowsStackedIcon } from "../Icons";
import { t } from "../i18n";
import { jsx as _jsx } from "preact/compat/jsx-runtime";
/**
 * The default formatter for the Month caption.
 */
export function formatMonthCaption(month, options) {
  return format(month, 'LLL', options);
}
export function CustomDayPicker(props) {
  return /*#__PURE__*/_jsx(DayPicker, {
    mode: "single",
    footer: /*#__PURE__*/_jsx("span", {
      className: "ds-u-visibility--screen-reader",
      children: t('singleInputDateField.arrowKeyInstructions')
    }),
    captionLayout: "dropdown",
    components: {
      Caption: CustomDayPickerCaption,
      IconDropdown: ArrowsStackedIcon
    },
    formatters: {
      formatMonthCaption
    },
    ...props
  });
}
export default CustomDayPicker;