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

import RadioBase from '@material-hu/components/design-system/RadioButton/RadioBase';

import { type AnswerResult } from 'src/pages/dashboard/learning/courses/types';

import ChoiceAnswerCard from './ChoiceAnswerCard';

type MultipleChoiceAnswerProps = {
  answer: AnswerResult;
};

const MultipleChoiceAnswer = ({ answer }: MultipleChoiceAnswerProps) => {
  return (
    <>
      {answer.choices.map(choice => (
        <ChoiceAnswerCard
          key={choice}
          choice={choice}
          answer={answer}
        >
          <RadioBase
            disabled
            checked={answer.answer?.includes(choice)}
          />
          <Typography
            variant="globalS"
            sx={{
              color: theme => theme.palette.new.text.neutral.disabled,
            }}
          >
            {choice}
          </Typography>
        </ChoiceAnswerCard>
      ))}
    </>
  );
};

export default MultipleChoiceAnswer;
