import { type FC } from 'react';

import { IconArrowForwardUp } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { useLokaliseTranslation } from 'src/utils/i18n';

const MessageForwardHeader: FC = () => {
  const { t } = useLokaliseTranslation('chat');
  const theme = useTheme();

  return (
    <Stack sx={{ flexDirection: 'row', alignItems: 'center' }}>
      <IconArrowForwardUp
        size={16}
        color={theme.palette.new.text.neutral.lighter}
      />
      <Typography
        variant="globalXXS"
        fontStyle="italic"
        color={theme.palette.new.text.neutral.lighter}
      >
        {t('messages.forwarded')}
      </Typography>
    </Stack>
  );
};

export default MessageForwardHeader;