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

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

function NewGoalVisibilityNote() {
  const { t } = useLokaliseTranslation('goals');

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
        color: 'new.text.neutral.lighter',
      }}
    >
      <IconSpeakerphone
        size={16}
        style={{ flexShrink: 0 }}
      />
      <Typography
        variant="globalS"
        color="new.text.neutral.lighter"
      >
        {t('new.note')}
      </Typography>
    </Stack>
  );
}

export default NewGoalVisibilityNote;