import React from 'react';
import { useAuth } from '../../contexts/AuthContext';

const Header = () => {
  const { user, logout } = useAuth();

  const handleLogout = async () => {
    if (window.confirm('确定要退出登录吗？')) {
      await logout();
    }
  };

  return (
    <div className="layout-header">
      <div>
        <h1 style={{ color: '#fff', fontSize: '20px', margin: 0 }}>
          海洋项目管理系统
        </h1>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
        <span style={{ color: '#fff', fontSize: '14px' }}>
          {user?.real_name || ''}
        </span>
        <span style={{ color: 'rgba(255,255,255,0.65)', fontSize: '14px' }}>
          ({user?.department || ''})
        </span>
        <button className="btn btn-default" onClick={handleLogout}>
          登出
        </button>
      </div>
    </div>
  );
};

export default Header;
