import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getTimezoneLabel } from '../../../lib/dates.js';
import { ChevronRightIcon } from '../../../lib/icons/ChevronRight.js';
import { DateTimePicker } from '../../../lib/ui/DateTimePicker/DateTimePicker.js';
import { FormField } from '../../../lib/ui/FormField.js';
import { InputLabel } from '../../../lib/ui/InputLabel.js';
import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
export function AccessCodeFormDatePicker({ timezone, onBack, startDate, setStartDate, endDate, setEndDate, onChangeTimezone, }) {
    return (_jsxs("div", { className: 'seam-schedule-picker', children: [_jsx(ContentHeader, { title: t.timingTitle, onBack: onBack }), _jsxs("div", { className: 'seam-content', children: [_jsxs("div", { className: 'seam-timezone', children: [_jsx("span", { className: 'seam-label', children: t.selectedTimezoneLabel }), _jsxs("span", { className: 'seam-selected', onClick: onChangeTimezone, children: [getTimezoneLabel(timezone), _jsx(ChevronRightIcon, {})] })] }), _jsxs(FormField, { children: [_jsx(InputLabel, { children: t.startTimeLabel }), _jsx(DateTimePicker, { value: startDate ?? '', onChange: setStartDate, size: 'large' })] }), _jsxs(FormField, { children: [_jsx(InputLabel, { children: t.endTimeLabel }), _jsx(DateTimePicker, { value: endDate ?? '', onChange: setEndDate, size: 'large' })] })] })] }));
}
const t = {
    timingTitle: 'Timing',
    selectedTimezoneLabel: 'All times in',
    startTimeLabel: 'Start',
    endTimeLabel: 'End',
};
//# sourceMappingURL=AccessCodeFormDatePicker.js.map