import { LogoutOutlined } from '@mui/icons-material';
import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
import { useLogout, useTranslate } from 'ra-core';

function LogoutButton(): JSX.Element {
  const logout = useLogout();
  const translate = useTranslate();

  return (
    <>
      <ListItemButton onClick={logout}>
        <ListItemIcon>
          <LogoutOutlined />
        </ListItemIcon>
        <ListItemText primary={translate('ra.auth.logout')} />
      </ListItemButton>
    </>
  );
}

export { LogoutButton };