import { Tabs as OldTabs, TabsProps, ConfigProvider } from 'antd';
import React, { useContext } from 'react';
import classNames from 'classnames';
import './index.less';

const { TabPane } = OldTabs;

const Tabs = (props: TabsProps & { hideBorder?: boolean }) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const { hideBorder } = props;
  const prefixCls = getPrefixCls('btri-tabs');
  return (
    <OldTabs
      {...props}
      className={classNames(prefixCls, props.className, {
        [`${prefixCls}-hideBorder`]: hideBorder,
      })}
    >
      {props.children}
    </OldTabs>
  );
};

Tabs.TabPane = TabPane;

export { Tabs };