import React from "react";
import { ChoiceListContainer } from "./style/choiceList.style";
import classNames from "classnames";
import GoodCheck from "../../../../assets/svg/goodCheck";

const ChoiceList = ({ options = [] }) => {
  return (
    <ChoiceListContainer>
      {options?.map((option, idx) => (
        <li
          key={option.id}
          className={classNames({
            "is-correct": option?.isCorrect,
          })}
        >
          <span>{idx + 1}</span>
          <p>{option?.text}</p>
          {option?.isCorrect && <GoodCheck />}
        </li>
      ))}
    </ChoiceListContainer>
  );
};

export default ChoiceList;
