import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "../../../utils";
import { InfoIcon } from "../../../icon";
import { CloseSmallIcon } from "../../../icon/icons/closeSmall";
import { UTCDateMini } from "@date-fns/utc";
import { format } from "date-fns";
import { useMemo } from "react";
function getTimeString(timestamp) {
    const date = format(new UTCDateMini(timestamp), "MMM dd");
    const time = format(new UTCDateMini(timestamp), "h:mm aa");
    return `${time} (UTC) on ${date}`;
}
export function MaintenanceStatusTips({ brokerName, startTime, endTime, onClose }) {
    const startDate = useMemo(()=>{
        return getTimeString(startTime);
    }, [
        startTime
    ]);
    const endDate = useMemo(()=>{
        return getTimeString(endTime);
    }, [
        endTime
    ]);
    const onCloseTips = ()=>{
        window.localStorage.setItem(`Maintenance_${startTime}`, "1");
        onClose();
    };
    return /*#__PURE__*/ _jsxs("div", {
        className: cn("orderly-bg-warning-darken orderly-text-warning orderly-text-2xs orderly-font-semibold orderly-leading-[18px]", "orderly-fixed orderly-left-0 orderly-right-0 orderly-z-[30]", "orderly-flex orderly-gap-2 orderly-items-start orderly-bottom-[64px] orderly-p-[10px] orderly-pr-[44px]", "orderly-font-semibold", "desktop:!orderly-flex desktop:!orderly-gap-1 desktop:!orderly-items-center desktop:!orderly-justify-center desktop:!orderly-static desktop:!orderly-h-[40px] desktop:!orderly-text-xs desktop:!orderly-bottom-0 desktop:!orderly-pr-0"),
        children: [
            /*#__PURE__*/ _jsx(InfoIcon, {
                size: 20,
                className: "orderly-flex-shrink-0 orderly-w-4 orderly-h-4 desktop:!orderly-w-5 desktop:!orderly-h-5"
            }),
            /*#__PURE__*/ _jsxs("div", {
                children: [
                    brokerName,
                    " will be temporarily unavailable for a scheduled upgrade from ",
                    startDate,
                    " to ",
                    endDate,
                    "."
                ]
            }),
            /*#__PURE__*/ _jsx(CloseSmallIcon, {
                size: 24,
                className: "orderly-absolute orderly-right-4 orderly-text-[# orderly-opacity-[.36] hover:orderly-opacity-[.98] orderly-cursor-pointer absolut-item-center",
                onClick: onCloseTips
            })
        ]
    });
}

//# sourceMappingURL=maintenanceStatusTips.js.map