/**
 * @description 自选+币对切换的tabs
 *
 * @date 创建时间 2022-10-18 16:45
 * @author 开发人员
 */

import React, { ReactNode } from "react"

import "./index.css"

import { Tabs, TabsProps } from "@components/Tabs"

const { TabPane } = Tabs

interface TradeTabsProps extends Pick<TabsProps, "activeKey" | "onChange"> {
  list: { label: ReactNode | string; value: string }[]
}

const TradeTabs: React.FC<TradeTabsProps> = props => {
  const { activeKey, list, onChange } = props

  return (
    <Tabs
      activeKey={activeKey}
      onChange={onChange}
      classes={{ root: "nts-ticker-trade-tabs", tab: "nts-ticker-trade-tab" }}
    >
      {list.map(item => (
        <TabPane key={item.value} tab={item.label} />
      ))}
    </Tabs>
  )
}

export default TradeTabs