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

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

export const KeyUpdateSubheader = () => {
  const { t } = useTranslation();

  return (
    <Stack
      sx={{ flexDirection: 'row', alignItems: 'center' }}
      color={_theme => _theme.palette?.base?.lilac?.[600]}
    >
      <IconSpeakerphone size={20} />
      <Typography
        variant="caption"
        sx={{ ml: 0.5 }}
      >
        {t('post:key_update')}
      </Typography>
    </Stack>
  );
};

export default KeyUpdateSubheader;