import React, { useState } from 'react';
import {
    IconButton, Menu, MenuItem, Avatar, Tooltip, Typography
} from '@mui/material';

const ProfileMenu = ({ user, onLogout }) => {
    const [anchorEl, setAnchorEl] = useState(null);
    const open = Boolean(anchorEl);

    const handleOpen = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    const handleLogoutClick = () => {
        handleClose();
        onLogout();
    };

    return (
        <>
            <Tooltip title="Профиль">
                <IconButton onClick={handleOpen} size="small" sx={{ ml: 2 }}>
                    <Avatar sx={{ bgcolor: 'primary.main' }}>
                        {user?.login?.[0]?.toUpperCase() || '?'}
                    </Avatar>
                </IconButton>
            </Tooltip>
            <Menu
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                onClick={handleClose}
                PaperProps={{
                    elevation: 3,
                    sx: {
                        mt: 1.5,
                        minWidth: 180,
                    },
                }}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'right',
                }}
                transformOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                }}
            >
                <MenuItem disabled>
                    <Typography variant="body2" color="text.secondary">
                        {user?.login || 'Неизвестный'}
                    </Typography>
                </MenuItem>
                <MenuItem onClick={handleLogoutClick}>
                    Выйти
                </MenuItem>
            </Menu>
        </>
    );
};

export default ProfileMenu;