import React from 'react';
import { classes, st } from './MonthDropdown.st.css.js';
import setMonth from 'date-fns/setMonth';
import DatePickerDropdown from '../../DatePickerDropdown';
const optionsOf = (items) => items.map((item, index) => ({ value: item, id: index }));
const MonthDropdown = ({ className, months, date, onChange, ariaLabel, ariaLabelledBy, }) => {
    const options = optionsOf(months);
    const selectedMonth = options.find(({ id }) => id === date.getMonth()) ?? options[0];
    return (React.createElement(DatePickerDropdown, { dataHook: "datepicker-month-dropdown", className: st(classes.root, className), caption: selectedMonth?.value, options: options, selectedId: selectedMonth.id, onChange: ({ id }) => onChange(setMonth(date, id)), ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy }));
};
export default MonthDropdown;
//# sourceMappingURL=MonthDropdown.js.map