import React from 'react';
import {
AppBar,
Toolbar,
Typography,
Button,
Box,
IconButton,
Menu,
MenuItem,
Divider,
Avatar
} from '@mui/material';
import {
AccountCircle,
Logout,
Settings
} from '@mui/icons-material';
import authService from '../services/auth';
const Header: React.FC = () => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const user = authService.getUser();
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleLogout = () => {
authService.logout();
window.location.href = '/login';
};
return (
<AppBar position="static">
<Toolbar>
<Typography variant="h6" sx={{ flexGrow: 1 }}>
MCP Shipping Control Center
</Typography>
{user && (
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
>
<Avatar sx={{ width: 32, height: 32, bgcolor: 'secondary.main' }}>
{user.username.charAt(0).toUpperCase()}
</Avatar>
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem disabled>
<AccountCircle sx={{ mr: 1 }} />
{user.username}
</MenuItem>
<Divider />
<MenuItem component="a" href="/settings">
<Settings sx={{ mr: 1 }} />
Settings
</MenuItem>
<MenuItem onClick={handleLogout}>
<Logout sx={{ mr: 1 }} />
Logout
</MenuItem>
</Menu>
</Box>
)}
</Toolbar>
</AppBar>
);
};
export default Header;
