import * as React from 'react';
import { Menu, Icon } from '@btri-ui/base';
import './componentList.less';
import './navigation.less';
import Logo from '../Icon/logo.svg';
export default () => {
  const items = [
    { label: '菜单项一', key: 'item-1', href: '#1' }, // 菜单项务必填写 key
    { label: '菜单项二', key: 'item-2', href: '#2' },
    { label: '菜单项三', key: 'item-3', href: '#3' },
    { label: '菜单项四', key: 'item-4', href: '#4' },
    { label: '菜单项五', key: 'item-5', href: '#5' },
    { label: '菜单项六', key: 'item-6', href: '#6' },
  ];

  const LeftNode = (
    <div className="app-header-title">
      <div className="logo">
        <div className="ibuildingLogo">
          <Logo />
        </div>
        <div className="dividerLine" />
        <div className="rightText">
          <div className="appTitle">{'系统名称'}</div>
          <span className="subText">
            {'Unified equipment management system'}
          </span>
        </div>
      </div>
    </div>
  );

  const RightNode = (
    <div className="navRight">
      <Icon iconName="Help" />
      <Icon iconName="Mail" />
      <div className="dividerLine" />
      <div className="userAvatar" />
      <div className="userName">{'艾丁'}</div>
    </div>
  );

  return (
    <div style={{ background: 'var(--bg-1)', padding: '10px' }}>
      <div className="navigation">
        <Menu
          items={items}
          mode="horizontal"
          navigation
          leftNode={LeftNode}
          rightNode={RightNode}
        />
      </div>
    </div>
  );
};