import React from 'react';
import { FC } from 'react';
import * as moblieIcon from 'antd-mobile-icons';
import { TabBar } from 'antd-mobile';
import { SettingOutlined } from '@ant-design/icons';
import './index.less';
import { useNavBottom } from './useNavBottom';

const NavBottom: FC = () => {
  const {
    tabs,
    pathname,
    setRouteActive
  } = useNavBottom()
  return (
    <TabBar
      className="af-tab-bar"
      activeKey={pathname}
      onChange={(value) => setRouteActive(value)}
    >
      {tabs.map((item) => {
        const icon = (moblieIcon as any)[item.icon] || <SettingOutlined />;
        return (
          <TabBar.Item
            key={'/main/' + item.link}
            icon={icon}
            title={item.name}
          />
        );
      })}
    </TabBar>
  );
};
export default NavBottom