import React from 'react';
import { Layout, Dropdown } from 'antd';
import type { MenuProps } from 'antd';
import AvatarProps from './AvatarProps';
import { useMyState } from '@/common';

const { Header } = Layout;

interface CustomHeaderProps {
  collapsed?: boolean;
  toggle?: () => void;
}

export const CustomHeader: React.FC<CustomHeaderProps> = ({ collapsed, toggle }) => {
  const { snap } = useMyState();

  const menuItems: MenuProps['items'] = [
    {
      key: 'profile',
      label: '个人资料',
      icon: <span>👤</span>,
    },
    {
      key: 'password',
      label: '修改密码',
      icon: <span>🔒</span>,
    },
    {
      type: 'divider',
    },
    {
      key: 'logout',
      label: '退出登录',
      icon: <span>🚪</span>,
      danger: true,
      onClick: () => {
        // 添加退出登录逻辑
        localStorage.removeItem('token');
        window.location.href = '/login';
      },
    },
  ];

  return (
    <Header className="custom-header">
      {/* 左侧区域 */}
      <div className="header-left">
        {/* 可以添加面包屑导航或其他内容 */}
      </div>

      {/* 右侧用户信息区域 */}
      <div className="header-right">
        <Dropdown menu={{ items: menuItems }} placement="bottomRight">
          <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
            <AvatarProps user={snap.session.user} />
          </div>
        </Dropdown>
      </div>
    </Header>
  );
};

// Styles will be defined in global.less:
// .custom-header { display: flex; justify-content: space-between; ... }
// .custom-header .header-left { flex: 1; }
// .custom-header .header-right { display: flex; gap: 16px; }