import { FC } from 'react';

import 'src/components/dashboard/chat/i18n';

import Box from '@material-hu/mui/Box';
import Chip from '@material-hu/mui/Chip';

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

export type ShowUnreadMessagesProps = {
  unreadMessages: number;
};

export const ShowUnreadMessages: FC<ShowUnreadMessagesProps> = props => {
  const { unreadMessages } = props;

  const { t } = useTranslation();

  return (
    <Box sx={{ display: 'flex', alignItems: 'center' }}>
      <Box
        sx={{
          borderBottom: theme => `1px solid ${theme.palette.divider}`,
          width: '100%',
        }}
      />
      <Chip
        color="primary"
        label={t('UNREAD_MESSAGES', {
          messages: unreadMessages,
        })}
        size="medium"
      />
      <Box
        sx={{
          borderBottom: theme => `1px solid ${theme.palette.divider}`,
          width: '100%',
        }}
      />
    </Box>
  );
};

export default ShowUnreadMessages;