import React, { useMemo } from 'react';
import Tabs from 'antd/es/tabs';
import 'antd/es/tabs/style/index';
import { XuiTabsProps } from './xui-tabs.d';

const XuiTabs: React.FC<XuiTabsProps> = ({ title, tabNav, tabPanes }) => {
  const className = 'xui-ant__tabs';

  const renderTabPanes = useMemo(
    () => tabPanes.map(tabPane => <Tabs.TabPane {...tabPane}>{tabPane.children}</Tabs.TabPane>),
    [tabPanes],
  );

  const { tabBarExtraContent } = tabNav;

  return (
    <div className={className}>
      <Tabs
        className={title ? `${className}--tabs` : ''}
        {...tabNav}
        tabBarExtraContent={
          title
            ? {
                left: <div className={`${className}--tabs-title`}>{title}</div>,
                right: tabBarExtraContent,
              }
            : tabBarExtraContent
        }
      >
        {renderTabPanes}
      </Tabs>
    </div>
  );
};

export default XuiTabs;