import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext } from "react";
import { OrderBookContext } from "../orderContext";
import { cn } from "../../../utils";
export const DesktopHeader = (props)=>{
    const { showTotal } = useContext(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__*/ _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__*/ _jsxs("div", {
                className: cn("orderly-basis-7/12 orderly-flex orderly-felx-row orderly-items-center orderly-mr-2", showTotal && "orderly-basis-5/12"),
                children: [
                    /*#__PURE__*/ _jsx("div", {
                        className: "orderly-flex-1 orderly-text-left",
                        children: /*#__PURE__*/ _jsx(Title, {
                            name: "Price",
                            token: props.quote
                        })
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "orderly-flex-1 orderly-text-right orderly-text-base-contrast-80",
                        children: /*#__PURE__*/ _jsx(Title, {
                            name: "Qty",
                            token: props.base,
                            justifyEnd: true
                        })
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: cn("orderly-basis-5/12 orderly-flex orderly-fex-row", showTotal && "orderly-basis-7/12"),
                children: [
                    /*#__PURE__*/ _jsx("div", {
                        className: cn("orderly-flex-1 orderly-pr-6", showTotal && "orderly-pr-3"),
                        children: /*#__PURE__*/ _jsx(Title, {
                            name: "Total",
                            token: props.base,
                            justifyEnd: true
                        })
                    }),
                    showTotal && /*#__PURE__*/ _jsx("div", {
                        className: "orderly-flex-1 orderly-pr-3",
                        children: /*#__PURE__*/ _jsx(Title, {
                            name: "Total",
                            token: props.quote,
                            justifyEnd: true
                        })
                    })
                ]
            })
        ]
    });
};
const Title = (props)=>{
    const { name, token, justifyEnd = false } = props;
    return /*#__PURE__*/ _jsxs("div", {
        id: "orderly-order-book-header-qty",
        className: cn("orderly-flex orderly-flex-row orderly-text-base-contrast-36 orderly-text-3xs orderly-items-end", justifyEnd && "orderly-justify-end"),
        children: [
            /*#__PURE__*/ _jsx("span", {
                children: name
            }),
            /*#__PURE__*/ _jsx("span", {
                children: `(${token})`
            })
        ]
    });
};

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