import {Tooltip} from "@atomintl/aui-next";
import {IconCom} from "@icons/index";
import {OrderTypeTipIcon} from "@icons/OrderTypeTip";
import React, {FC} from "react";
import {DirEnum} from "@utils/contractRules";

export interface StartAdornmentProps{
  dir: DirEnum;
  showTooltip: boolean
}
const StartAdornment: FC<StartAdornmentProps> = props => {
  const { dir, showTooltip } = props;
  return (
    <div className={`text-[14px] flex items-center`}>
      <div className={`mr-[6px]`}>{dir === DirEnum.UP ? "止盈" : "止损"}</div>
      {showTooltip ?
        <Tooltip
          width={"452px"}
          placement="top-start"
          horizontalOffset={-47}
          title={`支持以回报率来设置止盈止损委托。请注意设置的回报率仅为参考，手续费、开仓价改变和实际成交价会影响实际回报率。加仓或者减仓将导致开仓价改变，止盈止损触发价格并不会随之变化。`}
        >
          <IconCom>
            <OrderTypeTipIcon />
          </IconCom>
        </Tooltip> :
        null}
    </div>
  );
};

export default StartAdornment;