import React from 'react';
import { Menu } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { getDefaultSettings } from '@/utils/utils';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';

export default () => {
  const { handbooks = [] } = getDefaultSettings();

  const menu = (
    <Menu className={styles.menu} selectedKeys={[]}>
      <span className={styles.handbookTip}>用户手册</span>
      {handbooks.map((handbook) => (
        <Menu.Item key={handbook.url}>
          <a href={handbook.url} target="__blank">
            {handbook.title}
          </a>
        </Menu.Item>
      ))}
    </Menu>
  );

  return (
    <HeaderDropdown overlay={menu}>
      <span className={styles.action}>
        <QuestionCircleOutlined />
      </span>
    </HeaderDropdown>
  );
};