import { h } from "@stencil/core";
import { BEM } from "../../../../utils/bem";
import { i18nBalDate } from "../../bal-date.i18n";
export const CalendarNav = ({ language, onClickSelectMonthAndYear, monthFullNames, month, year, isCalendarVisible, isListVisible, onClickPreviousMonth, onClickNextMonth, }) => {
    const block = BEM.block('date-calendar');
    const blockNav = block.element('nav');
    const nextMonthLabel = i18nBalDate[language].nextMonth;
    const previousMonthLabel = i18nBalDate[language].previousMonth;
    const selectMonthLabel = i18nBalDate[language].selectMonth;
    return (h("div", { class: Object.assign({}, blockNav.class()) }, h("div", { class: Object.assign({}, blockNav.modifier('start').class()) }, h("button", { title: selectMonthLabel, "aria-label": selectMonthLabel, tabIndex: -1, "data-test": "change-year-month", onClick: onClickSelectMonthAndYear }, h("span", null, monthFullNames[month - 1], " ", year), h("bal-icon", { name: "caret-up", color: "primary", size: "small", turn: isCalendarVisible }))), h("div", { class: Object.assign({}, blockNav.modifier('end').class()), style: {
            display: isListVisible ? 'none' : 'flex',
        } }, h("button", { title: previousMonthLabel, "aria-label": previousMonthLabel, onClick: onClickPreviousMonth, tabIndex: -1, "data-test": "previous-month" }, h("bal-icon", { name: "caret-left", color: "primary", size: "small" })), h("button", { title: nextMonthLabel, "aria-label": nextMonthLabel, onClick: onClickNextMonth, tabIndex: -1, "data-test": "next-month" }, h("bal-icon", { name: "caret-right", color: "primary", size: "small" })))));
};
