import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { SelectFieldRaw, } from "#scalars";
import { Button } from "../../../../../scalars/components/fragments/button/button.js";
import TimePeriodSelector from "./time-period-selector.js";
import TimeSelector from "./time-selector.js";
const TimePickerContent = ({ onSave, onCancel, selectedHour, selectedMinute, selectedPeriod, setSelectedHour, setSelectedMinute, setSelectedPeriod, hours, minutes, timeZonesOptions, selectProps, is12HourFormat, isDisableSelect, selectedTimeZone, setSelectedTimeZone, timeZone, }) => {
    return (_jsxs("div", { className: "relative mx-auto w-full", children: [_jsx(SelectFieldRaw, { name: "", options: timeZonesOptions, disabled: isDisableSelect, searchable: true, placeholder: "Select a timezone", className: "w-full", selectionIcon: "checkmark", value: timeZone || selectedTimeZone, onChange: setSelectedTimeZone, ...selectProps }), is12HourFormat && (_jsx(TimePeriodSelector, { selectedPeriod: selectedPeriod, setSelectedPeriod: setSelectedPeriod })), _jsxs("div", { className: "mx-auto mt-[15px] flex h-[148px] justify-center overflow-hidden", style: {
                    maskImage: "linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%)",
                }, children: [_jsx(TimeSelector, { options: hours, selectedValue: selectedHour, onSelect: setSelectedHour, isCyclic: true }), _jsx("div", { className: "flex items-center px-4 text-sm font-normal leading-[20px] text-gray-900", children: ":" }), _jsx(TimeSelector, { options: minutes, selectedValue: selectedMinute, onSelect: setSelectedMinute, isCyclic: true })] }), _jsxs("div", { className: "flex items-center justify-between pt-[25px]", children: [_jsx(Button, { variant: "ghost", onClick: onCancel, className: "font-inter text-center text-[12px] font-medium leading-[18px] text-gray-500", children: "CANCEL" }), _jsx(Button, { variant: "ghost", onClick: () => onSave?.(`${selectedHour}:${selectedMinute} ${selectedPeriod}`), className: "font-inter text-center text-[12px] font-medium leading-[18px] text-gray-500", children: "SAVE" })] })] }));
};
export default TimePickerContent;
//# sourceMappingURL=time-picker-content.js.map