import {Box, Button, MenuItem, Typography} from "@mui/material";
import MeetingRoomIcon from "@mui/icons-material/MeetingRoom";
import useUser from "@/lib/app/hooks/useUser";
import {useTranslations} from "next-intl";

export default function ProfileOptionLogOut({handleCloseUserMenu}) {
    const t = useTranslations();
    const {clearToken} = useUser();
    const handleClickLogOut = () => {
        handleCloseUserMenu();
        clearToken();
    };
    return (
        <>
            <MenuItem
                component={Button}
                to={{
                    pathname: "/dashboard/logout",
                }}
                sx={{
                    display: "flex",
                    justifyContent: "center",
                    borderTop: 1,
                    px: 3,
                    py: 1.5,
                    borderColor: "#e1e1e1",
                    textTransform: "unset",
                }}
                onClick={handleClickLogOut}
            >
                <Box sx={{display: "flex", alignItems: "center", flex: 1}}>
                    <Box
                        sx={{
                            display: "flex",
                            alignItems: "center",
                            color: "primary.main",
                            pr: 2,
                        }}
                    >
                        <MeetingRoomIcon/>
                    </Box>
                    <Typography sx={{flex: 1}} textAlign="start">
                        {t("header.logout")}
                    </Typography>
                </Box>
            </MenuItem>
        </>
    );
}