import { FC } from 'react';

import Stack from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';

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

type PollVoteButtonProps = {
  hasBeenAnswered: boolean;
  isDraft?: boolean;
  disabled: boolean;
  onVote: () => void;
  isLoading: boolean;
};

const PollVoteButton: FC<PollVoteButtonProps> = ({
  hasBeenAnswered,
  isDraft = false,
  disabled,
  onVote,
  isLoading,
}) => {
  const { t } = useTranslation('post');

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

  return (
    <Stack
      direction="row"
      justifyContent="flex-end"
      alignItems="center"
    >
      <Button
        variant="contained"
        color="primary"
        type="button"
        disabled={disabled || isLoading}
        onClick={onVote}
        sx={{ minWidth: 80 }}
      >
        {t('vote')}
      </Button>
    </Stack>
  );
};

export default PollVoteButton;