import { FC } from 'react';

import { format } from 'date-fns';

import './i18n';

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

import { useTranslation } from './i18n';

type ChatThreadInfoFooterProps = {
  createdDate: any;
};

const ChatThreadInfoFooter: FC<ChatThreadInfoFooterProps> = props => {
  const { createdDate } = props;

  const { t } = useTranslation();

  return (
    <Box
      sx={{
        width: '100%',
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Typography color="textSecondary">
        {t('GROUP_CREATED', {
          date: format(new Date(createdDate), 'dd/MM/yyyy'),
        })}
      </Typography>
    </Box>
  );
};

export default ChatThreadInfoFooter;