"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DayPicker = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const box_1 = __importDefault(require("../../box"));
const core_1 = require("../../core");
const utils_1 = require("../../utils");
const calendar_styles_1 = require("../calendar.styles");
const consts_1 = require("../consts");
const DayItem = (0, core_1.styled)(calendar_styles_1.CalendarItem) `
  aspect-ratio: 1;
  position: relative;
  font-size: 14px;
  font-weight: 500;
  width: 40px;
  height: 40px;
  color: ${core_1.th.color('seaBlue.main')};
  display: inline-flex;
  align-items: center;
`;
const DaysContainer = (0, core_1.styled)(calendar_styles_1.CalendarItemsContainer) `
  grid-template-columns:     repeat(7, 1fr);
  grid- template-rows: auto;
`;
const DayPicker = ({ calendar, onSelectDay }) => ((0, jsx_runtime_1.jsxs)(DaysContainer, { className: (0, utils_1.cs)('vui-day-picker'), mt: 1, wrap: true, children: [consts_1.weekDays.map((day, index) => ((0, jsx_runtime_1.jsx)(box_1.default, { border: 0, className: "dayHeader", color: "seaBlue.main", fontSize: 16, fontWeight: 500, children: day }, `week-day-${index}`))), calendar.items.map(item => ((0, jsx_runtime_1.jsx)(DayItem, Object.assign({ className: (0, utils_1.cs)('vui-day-item'), onClick: (!item.isDisabled && (onSelectDay === null || onSelectDay === void 0 ? void 0 : onSelectDay(item.date))) || undefined }, item, { children: item.date.getUTCDate() }), item.date.getTime())))] }));
exports.DayPicker = DayPicker;
//# sourceMappingURL=dayPicker.js.map