import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { OrderSide } from "@orderly.network/types";
import { Text } from "../../../text";
import { NumeralTotal } from "../../../text/numeralTotal";
import { cn } from "../../../utils/css";
import { commify } from "@orderly.network/utils";
export const OrderDetail = (props)=>{
    const { order, quote } = props;
    const { side } = order;
    return /*#__PURE__*/ _jsxs("div", {
        className: cn("orderly-grid orderly-grid-cols-[1fr_2fr]", props.className),
        children: [
            /*#__PURE__*/ _jsx("div", {
                className: "orderly-flex orderly-flex-col",
                children: /*#__PURE__*/ _jsx(Text, {
                    type: side === OrderSide.SELL ? "sell" : "buy",
                    children: side === OrderSide.SELL ? "Limit Sell" : "Limit Buy"
                })
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-space-y-2",
                children: [
                    /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-flex orderly-justify-between",
                        children: [
                            /*#__PURE__*/ _jsx("span", {
                                className: "orderly-text-base-contrast-54",
                                children: "Qty."
                            }),
                            /*#__PURE__*/ _jsx(Text, {
                                type: side === OrderSide.SELL ? "sell" : "buy",
                                children: commify(order.order_quantity)
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-flex orderly-justify-between",
                        children: [
                            /*#__PURE__*/ _jsx("span", {
                                className: "orderly-text-base-contrast-54",
                                children: "Price"
                            }),
                            /*#__PURE__*/ _jsx(Text, {
                                surfix: /*#__PURE__*/ _jsx("span", {
                                    className: "orderly-text-base-contrast-36",
                                    children: quote
                                }),
                                children: commify(order.order_price)
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-flex orderly-justify-between",
                        children: [
                            /*#__PURE__*/ _jsx("span", {
                                className: "orderly-text-base-contrast-54",
                                children: "Total"
                            }),
                            /*#__PURE__*/ _jsx(NumeralTotal, {
                                quantity: order.order_quantity ?? 0,
                                price: order.order_price ?? 0,
                                surfix: /*#__PURE__*/ _jsx("span", {
                                    className: "orderly-text-base-contrast-36",
                                    children: quote
                                })
                            })
                        ]
                    })
                ]
            })
        ]
    });
};

//# sourceMappingURL=orderDetail.js.map