import { FC } from 'react';

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

import { PollOption as PollOptionType, Poll } from 'src/types/posts';

import { PollOption } from '.';

type PollOptionsContainerProps = {
  pollOptions: PollOptionType[];
  disabled: boolean;
  onSelect: (index: number) => void;
  selectedOption: number | null;
  votersVisible: boolean;
  poll: Poll;
  postId: number;
};

const PollOptionsContainer: FC<PollOptionsContainerProps> = ({
  pollOptions,
  disabled,
  onSelect,
  selectedOption,
  votersVisible,
  poll,
  postId,
}) => {
  return (
    <Stack sx={{ gap: 2 }}>
      {pollOptions.map((option, index) => (
        <PollOption
          key={option.id}
          pollOption={option}
          disabled={disabled}
          onClick={() => onSelect(index)}
          checked={selectedOption === index}
          optionHasVotes={option.answerCount > 0}
          votersVisible={votersVisible}
          poll={poll}
          postId={postId}
        />
      ))}
    </Stack>
  );
};

export default PollOptionsContainer;