import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Divider } from "../../../divider";
import { Tooltip } from "../../../tooltip";
import { cn } from "../../../utils";
import { useMediaQuery } from "@orderly.network/hooks";
import { MEDIA_TABLET } from "@orderly.network/types";
export const FreeCollat = ()=>{
    const isTable = useMediaQuery(MEDIA_TABLET);
    return isTable ? /*#__PURE__*/ _jsx(MobileFreeCollat, {}) : /*#__PURE__*/ _jsx(DesktopFreeCollat, {
        title: "Available"
    });
};
export const MobileFreeCollat = ()=>{
    return /*#__PURE__*/ _jsx("span", {
        children: "Available"
    });
};
export const DesktopFreeCollat = (props)=>{
    return /*#__PURE__*/ _jsx(Tooltip, {
        // @ts-ignore
        content: /*#__PURE__*/ _jsxs("div", {
            children: [
                /*#__PURE__*/ _jsx("span", {
                    children: "Free collateral for placing new orders."
                }),
                /*#__PURE__*/ _jsx(Divider, {
                    className: "orderly-py-2 orderly-border-white/10"
                }),
                /*#__PURE__*/ _jsx("span", {
                    children: "Free collateral = Total balance + Total unsettlement PnL - Total position initial margin"
                })
            ]
        }),
        className: "orderly-max-w-[270px]",
        children: /*#__PURE__*/ _jsx("span", {
            className: cn("orderly-text-base-contrast-54 orderly-text-2xs orderly-cursor-pointer", props.className && props.className),
            children: props.title
        })
    });
};

//# sourceMappingURL=freeCollat.js.map