import React__default from 'react';
import { getId } from '../../../../utils/index.js';
import { Chip } from '../../../Chip/Chip.js';
import { getMonthName } from '../../dateUtils.js';
import { PeriodWrapper, PeriodName } from '../../styles.js';

function Month({ width, height, locale, currentMonth, 'data-testid': dataTestId, updateCurrentMonth, }) {
    const appendTestId = getId(dataTestId);
    const onMonthSelect = (month) => {
        updateCurrentMonth(month);
    };
    return (React__default.createElement(PeriodWrapper, { style: { width, height }, "data-testid": dataTestId }, [...Array(12)].map((_, index) => (React__default.createElement(PeriodName, { key: index },
        React__default.createElement(Chip, { selected: index === currentMonth, onClick: () => onMonthSelect(index), label: getMonthName(index, locale, 'short'), variant: 'ghost', "data-testid": appendTestId(`chip-${index}`) }))))));
}

export { Month };
