/**
 * @description 交易对组件
 *
 * @date 创建时间 2022-10-19 15:43
 * @author 开发人员
 */

import React, { memo } from "react";
import { StarIcon } from "@icons/StarIcon";
import { Coin } from "@atomintl/aui-next";

interface SymbolProps {
  /**
   * 是否是杠杆
   */
  isMargin?: boolean;
  /**
   * 杠杆
   * @default 1
   */
  margin?: number;
  /**
   * 币对
   *
   */
  symbol: string;
  /**
   * 标的资产-币种
   */
  base: string;
  /**
   *是否是自选
   @default false
   */
  like?: boolean;
  /**
   *更新自选
   */
  onClickLikes?: (event?: React.MouseEvent<HTMLElement>) => void;
  /**
   *选中当前的行/交易对
   */
  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;

  className?: string;
}

const Symbol: React.FC<SymbolProps> = props => {
  const { symbol, isMargin, margin, like, base, className, onClickLikes, onClick } = props;

  return (
    <div className={`flex items-center ${className}`}>
      <button className="w-[16px] outline-none bg-transparent text-inherit" onClick={onClickLikes}>
        <StarIcon like={like} />
      </button>
      <Coin type={base} showLabel={false} imgNeedTransition={false} className={"mx-[10px]"} />
      <div onClick={onClick} className="flex items-center">
        <span className="font-bold">{symbol}</span>
        {isMargin && margin ? <span>{margin}X</span> : ""}
      </div>
    </div>
  );
};

Symbol.defaultProps = { margin: 1, isMargin: false, like: false, className: "" };

export default memo(Symbol);