import { FC } from 'react';
import { useParams } from 'react-router-dom';

import LogoutIcon from '@material-hu/icons/material/Logout';
import Box from '@material-hu/mui/Box';
import ButtonBase from '@material-hu/mui/ButtonBase';
import Typography from '@material-hu/mui/Typography';

import { LeftGroup } from 'src/components/dashboard/chat/ChatGroupActions';
import { useTranslation } from 'src/components/dashboard/chat/ChatThreadInfo/i18n';

const ChatThreadInfoActions: FC = () => {
  const { t } = useTranslation();
  const { id } = useParams();

  return (
    <Box
      sx={{
        display: 'flex',
        flex: 1,
      }}
    >
      <LeftGroup
        threadId={Number(id)}
        button={buttonProps => (
          <ButtonBase
            sx={{
              flex: 1,
              color: theme => theme.palette.error.main,
              justifyContent: 'flex-start',
            }}
            {...buttonProps}
          >
            <LogoutIcon sx={{ mx: 3 }} />
            <Typography>{t('LEFT_GROUP')}</Typography>
          </ButtonBase>
        )}
      />
    </Box>
  );
};

export default ChatThreadInfoActions;