import React from 'react';
import { Layout, Button, Space } from 'antd';
import { BookOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Header: AntHeader } = Layout;

const Header: React.FC = () => {
  const navigate = useNavigate();

  const handleUserManualClick = () => {
    // 导航到使用手册页面
    navigate('/manual');
  };

  return (
    <AntHeader style={{
      background: '#ffffff',
      borderBottom: '1px solid #e8e8e8',
      padding: '0 24px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      height: '64px',
      position: 'fixed',
      top: 0,
      left: 220,
      right: 0,
      zIndex: 1000,
      boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
    }}>
      <div style={{ 
        fontSize: '18px', 
        fontWeight: 600,
        color: '#1890ff',
        display: 'flex',
        alignItems: 'center',
        gap: '8px'
      }}>
        <BookOutlined />
        <span>AI 小说创作系统</span>
      </div>

      <Space size="middle">
        <Button 
          type="text" 
          icon={<QuestionCircleOutlined />}
          onClick={handleUserManualClick}
          style={{
            color: '#595959',
            display: 'flex',
            alignItems: 'center',
            gap: '6px'
          }}
        >
          使用手册
        </Button>
      </Space>
    </AntHeader>
  );
};

export default Header;