import React, { useMemo } from 'react';
import { Layout, Space } from 'antd';
import classNames from 'classnames';
import Logo from '../Logo';
import Title from './Title';
import User from './User';
import Exit from './Exit';
import SplitMenu from './SplitMenu';

const { Header } = Layout;

export default (props) => {
  const { menus, theme, location, onMenuChange } = props;

  const className = useMemo(() => classNames({
    'layout-header': true,
    'light': theme === 'light',
  }), [theme]);

  return (
    <Header className={className}>
      <Logo />
      <SplitMenu items={menus} location={location} onChange={onMenuChange} />
      <Space>
        <User />
        <Exit />
      </Space>
    </Header>
  )
}
