import { FC } from 'react';

import { IconEyeOff } 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';

type PollAnonymousMessageProps = {
  votersVisible: boolean;
  hasBeenAnswered: boolean;
};

const PollAnonymousMessage: FC<PollAnonymousMessageProps> = ({
  votersVisible,
  hasBeenAnswered,
}) => {
  const { t } = useTranslation('post');

  if (votersVisible || hasBeenAnswered) {
    return null;
  }

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 1,
      }}
    >
      <Stack
        sx={{
          px: 1,
          width: 40,
          height: 40,
          justifyContent: 'center',
        }}
      >
        <IconEyeOff size={24} />
      </Stack>
      <Typography
        variant="globalS"
        color={theme => theme.palette.new.text.neutral.default}
      >
        {t('poll_anonymous_info_message')}
      </Typography>
    </Stack>
  );
};

export default PollAnonymousMessage;