"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimeUnitHeader = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const box_1 = require("../../box");
const button_1 = require("../../button");
const utils_1 = require("../../utils");
const consts_1 = require("../consts");
const utils_2 = require("../utils");
const h = 40;
const fontSize = 16;
/**
 * Displays the header title with the month and year being viewed
 */
const TimeUnitHeader = ({ onSetTimeUnitMode, timeUnitMode, viewMonth }) => {
    return ((0, jsx_runtime_1.jsxs)(box_1.Box, { center: true, className: (0, utils_1.cs)('vui-time-unit-header'), cursor: "pointer", flex: "1", justify: "start", children: [(0, utils_2.isDay)(timeUnitMode) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { fontSize: fontSize, h: h, onClick: () => onSetTimeUnitMode('month'), variant: "tertiaryDark", children: consts_1.months[viewMonth.getUTCMonth()] }), (0, jsx_runtime_1.jsx)(button_1.Button, { fontSize: fontSize, h: h, onClick: () => onSetTimeUnitMode('year'), variant: "tertiaryDark", children: viewMonth.getUTCFullYear() })] })), (0, utils_2.isMonth)(timeUnitMode) && ((0, jsx_runtime_1.jsx)(button_1.Button, { fontSize: fontSize, h: h, onClick: () => onSetTimeUnitMode('year'), variant: "tertiaryDark", children: viewMonth.getUTCFullYear() })), (0, utils_2.isYear)(timeUnitMode) && ((0, jsx_runtime_1.jsx)(button_1.Button, { fontSize: fontSize, h: h, onClick: () => onSetTimeUnitMode('day'), variant: "tertiaryDark", children: "Year" }))] }));
};
exports.TimeUnitHeader = TimeUnitHeader;
//# sourceMappingURL=timeUnitHeader.js.map