import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from '../../box';
import { Button } from '../../button';
import { cs } from '../../utils';
import { months } from '../consts';
import { isDay, isMonth, isYear } from '../utils';
const h = 40;
const fontSize = 16;
/**
 * Displays the header title with the month and year being viewed
 */
export const TimeUnitHeader = ({ onSetTimeUnitMode, timeUnitMode, viewMonth }) => {
    return (_jsxs(Box, { center: true, className: cs('vui-time-unit-header'), cursor: "pointer", flex: "1", justify: "start", children: [isDay(timeUnitMode) && (_jsxs(_Fragment, { children: [_jsx(Button, { fontSize: fontSize, h: h, onClick: () => onSetTimeUnitMode('month'), variant: "tertiaryDark", children: months[viewMonth.getUTCMonth()] }), _jsx(Button, { fontSize: fontSize, h: h, onClick: () => onSetTimeUnitMode('year'), variant: "tertiaryDark", children: viewMonth.getUTCFullYear() })] })), isMonth(timeUnitMode) && (_jsx(Button, { fontSize: fontSize, h: h, onClick: () => onSetTimeUnitMode('year'), variant: "tertiaryDark", children: viewMonth.getUTCFullYear() })), isYear(timeUnitMode) && (_jsx(Button, { fontSize: fontSize, h: h, onClick: () => onSetTimeUnitMode('day'), variant: "tertiaryDark", children: "Year" }))] }));
};
//# sourceMappingURL=timeUnitHeader.js.map