import { FC } from 'react';

import MenuItem from '@material-hu/mui/MenuItem';
import Typography from '@material-hu/mui/Typography';

import { ChatListItem } from 'src/types/chats';

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

export type LeftGroupOptionProps = {
  thread: ChatListItem;
};

const LeftGroupOption: FC<LeftGroupOptionProps> = props => {
  const { thread } = props;

  const { t } = useTranslation();

  return (
    <LeftGroup
      threadId={thread?.chat?.id}
      button={buttonProps => (
        <MenuItem
          sx={{
            color: theme => theme.palette.error.main,
          }}
          {...buttonProps}
        >
          <Typography
            sx={{
              display: 'flex',
              alignItems: 'center',
            }}
          >
            {t('LEFT_GROUP')}
          </Typography>
        </MenuItem>
      )}
    />
  );
};

export default LeftGroupOption;