import React, { FC, useMemo } from "react";
import { MarginTypeEnum } from "@shared/types";
import { PulldownIcon } from "@icons/Pulldown";
import clsx from "clsx";

export interface MarginLeverageProps {
  leverage: number;
  marginType: MarginTypeEnum;
  onShowLeverageModal?: (bool: boolean) => void;
  isLogin?: boolean;
}
export const MarginLeverage: FC<MarginLeverageProps> = props => {
  const { leverage = 1, marginType = MarginTypeEnum.Cross, isLogin } = props;

  const disable = useMemo(() => !isLogin, [isLogin]);
  const onChange = () => {
    !disable && props.onShowLeverageModal?.(true);
  };

  const marginTypeText = useMemo(() => (marginType === MarginTypeEnum.Cross ? "全仓" : "逐仓"), [marginType]);

  return (
    <div
      className={clsx(
        "flex flex-1 items-center justify-between px-3 h-6 font-medium text-gray-16 bg-derive-10  rounded-[4px]",
        disable ? "notAllowedCursor" : "cursor-pointer"
      )}
      onClick={onChange}
    >
      <div className="flex items-center">
        <div>{marginTypeText}</div>
        <div className="ml-1.5 text-blue">{leverage}x</div>
      </div>
      <PulldownIcon />
    </div>
  );
};