"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "DesktopHeader", {
    enumerable: true,
    get: function() {
        return DesktopHeader;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _orderContext = require("../orderContext");
const _utils = require("../../../utils");
const DesktopHeader = (props)=>{
    const { showTotal } = (0, _react.useContext)(_orderContext.OrderBookContext);
    // return (
    //     <div className="orderly-flex orderly-flex-1 orderly-flex-row orderly-justify-between orderly-text-base-contrast-36 orderly-text-4xs desktop:orderly-text-3xs orderly-pb-2 desktop:orderly-pt-2">
    //         <Title name="Price" token={props.quote} />
    //         <Title name="Qty" token={props.base} />
    //         <Title name="Total" token={props.base} />
    //         {showTotal && <Title name="Total" token={props.quote} />}
    //     </div>
    // );
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        className: "orderly-flex orderly-flex-row orderly-justify-between orderly-text-base-contrast-80 orderly-text-3xs orderly-relative orderly-font-bold orderly-cursor-pointer orderly-mb-1",
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                className: (0, _utils.cn)("orderly-basis-7/12 orderly-flex orderly-felx-row orderly-items-center orderly-mr-2", showTotal && "orderly-basis-5/12"),
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                        className: "orderly-flex-1 orderly-text-left",
                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Title, {
                            name: "Price",
                            token: props.quote
                        })
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                        className: "orderly-flex-1 orderly-text-right orderly-text-base-contrast-80",
                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Title, {
                            name: "Qty",
                            token: props.base,
                            justifyEnd: true
                        })
                    })
                ]
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                className: (0, _utils.cn)("orderly-basis-5/12 orderly-flex orderly-fex-row", showTotal && "orderly-basis-7/12"),
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                        className: (0, _utils.cn)("orderly-flex-1 orderly-pr-6", showTotal && "orderly-pr-3"),
                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Title, {
                            name: "Total",
                            token: props.base,
                            justifyEnd: true
                        })
                    }),
                    showTotal && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                        className: "orderly-flex-1 orderly-pr-3",
                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Title, {
                            name: "Total",
                            token: props.quote,
                            justifyEnd: true
                        })
                    })
                ]
            })
        ]
    });
};
const Title = (props)=>{
    const { name, token, justifyEnd = false } = props;
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        id: "orderly-order-book-header-qty",
        className: (0, _utils.cn)("orderly-flex orderly-flex-row orderly-text-base-contrast-36 orderly-text-3xs orderly-items-end", justifyEnd && "orderly-justify-end"),
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                children: name
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                children: `(${token})`
            })
        ]
    });
};

//# sourceMappingURL=header.desktop.js.map