import { IAnswer } from "../../data";
import Answer from "../Answer";
import styles from "./styles.module.scss";

interface IAnswersProps {
  answers: IAnswer[];
  classNameAnswer?: string;
  activeAnswer?: string;
}

function Answers({
  answers,
  activeAnswer,
  classNameAnswer = "",
}: IAnswersProps) {
  return (
    <div className={styles.container}>
      <ul className={styles.list}>
        {answers.map((answer, index) => (
          <li className={styles.item} key={index}>
            <Answer
              classNameContainer={classNameAnswer}
              answer={answer}
              onClick={answer.onClick}
              active={answer.value === activeAnswer}
            />
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Answers;
