import { ESide } from "@utils/contractRules";
import { formatFloor, formatMoney } from "@utils/FormatNumber";
import React from "react";

export const Headers = (props: {
  symbol: string;
  side: ESide;
  level: string | number;
  avgEntryPrice: string | number;
  newestPrice: string | number;
  scale: number;
}) => {
  const { symbol, side, level, avgEntryPrice, newestPrice, scale } = props;
  const long = side === ESide.LONG;
  return (
    <>
      <div className={`flex justify-between items-center`}>
        <div className={`font-medium`}>{symbol} 永续合约</div>
        <div className={`${long ? "text-green" : "text-red"} font-bold`}>{`做${long ? "多" : "空"}${level}x`}</div>
      </div>
      <div className={`flex justify-between items-center py-[12px]`}>
        <div className={`text-[#3c3c4399] font-medium`}>开仓价格</div>
        <div className={`font-bold text-black`}>{formatMoney(formatFloor(avgEntryPrice, scale))} USDT</div>
      </div>
      <div className={`flex justify-between items-center`}>
        <div className={`text-[#3c3c4399] font-medium`}>最新价格</div>
        <div className={`font-bold text-black`}>{formatMoney(formatFloor(newestPrice, scale))} USDT</div>
      </div>
    </>
  );
};