import React from 'react';
import { Layout, Input, Avatar, Dropdown } from 'antd';
import { UserOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons';

const { Header: AntHeader } = Layout;

function Header() {
  const menuItems = [
    { key: 'settings', icon: <SettingOutlined />, label: '设置' },
    { key: 'logout', icon: <LogoutOutlined />, label: '退出登录' },
  ];

  return (
    <AntHeader style={{ background: '#1890ff', padding: '0 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <span style={{ color: 'white', fontSize: '18px', fontWeight: 'bold' }}>CloudDisk</span>
      
      <Input 
        placeholder="搜索文件..." 
        style={{ width: '300px', marginLeft: '20px' }} 
      />
      
      <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '16px' }}>
        <Dropdown menu={{ items: menuItems }} placement="bottomRight">
          <Avatar icon={<UserOutlined />} style={{ cursor: 'pointer' }} />
        </Dropdown>
      </div>
    </AntHeader>
  );
}

export default Header;