import { IAnswer } from "@/data";
import styles from "./styles.module.css";

interface IAnswerProps {
  classNameContainer?: string;
  answer: IAnswer;
  type?: "multiply" | "single" | "only-text-single";
  active?: boolean;
  onClick: () => void;
}

function Answer({
  answer,
  type = "single",
  active,
  classNameContainer = "",
  onClick,
}: IAnswerProps) {
  return (
    <div
      className={`${styles.container} ${
        active ? styles.active : ""
      } ${classNameContainer}`}
      onClick={onClick}
    >
      {type !== "only-text-single" && (
        <img className={styles.icon} src={answer.icon} alt={answer.id} />
      )}
      <p className={styles.answer}>{answer.answer}</p>
      {type === "multiply" && (
        <div className={styles.circle}>
          {active && <img src="/check-mark.svg" alt="Check mark" />}
        </div>
      )}
    </div>
  );
}

export default Answer;