import { FC } from 'react';

import CloseIcon from '@material-hu/icons/material/Close';
import Box from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';

import { useTranslation } from './i18n';

export type ChatThreadInfoToolbarProps = {
  onClose: () => void;
};

const ChatThreadInfoToolbar: FC<ChatThreadInfoToolbarProps> = props => {
  const { onClose } = props;
  const { t } = useTranslation();

  return (
    <Box
      sx={{
        display: 'flex',
        flexShrink: 0,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        backgroundColor: 'background.paper',
        borderBottom: theme => `1px solid ${theme.palette.divider}`,
        minHeight: 64,
        px: 2,
        py: 1,
      }}
    >
      <Tooltip title={t('CLOSE')}>
        <IconButton
          aria-label={t('CLOSE')}
          size="small"
          onClick={onClose}
        >
          <CloseIcon />
        </IconButton>
      </Tooltip>
      <Typography
        color="textPrimary"
        variant="subtitle1"
        sx={{ ml: 2 }}
      >
        {t('GROUP_INFO')}
      </Typography>
    </Box>
  );
};

export default ChatThreadInfoToolbar;