import React, { FC, useMemo } from "react";
import { PlaceSelect } from "@components/PlaceOrder/PlaceSelect";
import { PriceSourceEnum } from "@shared/types";

export interface PriceSourceProps {
  /** 价格类型，默认最新 */
  value?: PriceSourceEnum;
  onChangePriceSource?: (priceSource: PriceSourceEnum) => void;
}

export const PriceSourceSelect: FC<PriceSourceProps> = props => {
  const list = useMemo(() => {
    return [
      { value: PriceSourceEnum.NewPrice, label: "最新" },
      { value: PriceSourceEnum.IndexPrice, label: "指数" },
      { value: PriceSourceEnum.MarkPrice, label: "标记" }
    ];
  }, []);
  return (
    <div className="nts-price-source-root cursor-pointer  text-gray-16 text-[14px]">
      <PlaceSelect
        list={list}
        value={props.value}
        optionWidth={80}
        onChange={(val: PriceSourceEnum) => props.onChangePriceSource?.(val)}
        classes={{
          customizeSelect: "pr-[12px]"
        }}
      />
    </div>
  );
};