import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Box from '../../box';
import { styled, th } from '../../core';
import { cs } from '../../utils';
import { CalendarItem, CalendarItemsContainer } from '../calendar.styles';
import { weekDays } from '../consts';
const DayItem = styled(CalendarItem) `
  aspect-ratio: 1;
  position: relative;
  font-size: 14px;
  font-weight: 500;
  width: 40px;
  height: 40px;
  color: ${th.color('seaBlue.main')};
`;
const DaysContainer = styled(CalendarItemsContainer) `
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto;
`;
export const DayPicker = ({ calendar, onSelectDay }) => (_jsxs(DaysContainer, { className: cs('vui-day-picker'), mt: 1, wrap: true, children: [weekDays.map((day, index) => (_jsx(Box, { border: 0, className: "dayHeader", color: "seaBlue.main", fontSize: 16, fontWeight: 500, children: day }, `week-day-${index}`))), calendar.items.map(item => (_jsx(DayItem, { className: cs('vui-day-item'), onClick: (!item.isDisabled && onSelectDay?.(item.date)) || undefined, ...item, children: item.date.getUTCDate() }, item.date.getTime())))] }));
//# sourceMappingURL=dayPicker.js.map