import { h } from "@stencil/core";
import { BEM } from "../../../../utils/bem";
export const CalendarGrid = ({ isVisible, ref, grid, weekdays, selectedDate, firstDayOfWeek, onSelectDay, }) => {
    const block = BEM.block('date-calendar');
    const blockBody = block.element('body');
    const blockBodyGrid = blockBody.element('grid');
    return (h("div", { role: "grid", class: Object.assign(Object.assign({}, blockBodyGrid.class()), blockBodyGrid.modifier('visible').class(isVisible)), "aria-hidden": isVisible ? 'false' : 'true', ref: el => ref(el) }, h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('head').class()) }, weekdays.map(weekday => (h("span", { role: "columnheader", "aria-label": weekday.ariaLabel, title: weekday.ariaLabel }, weekday.textContent)))), h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('body').class()), style: { '--bal-date-first-week-day': `${firstDayOfWeek}` } }, grid.map(cell => (h("bal-date-calendar-cell", Object.assign({}, cell, { selected: cell.isoDate === selectedDate, onBalSelectDay: ({ detail }) => onSelectDay(detail) })))))));
};
