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

export type TMultiplyAnswer = IAnswer & {
  isWithIcon?: boolean;
};

interface IAnswerProps {
  answer: TMultiplyAnswer;
  classNameContainer?: string;
  active?: boolean;
  onClick?: (answer: IAnswer) => void;
}

function MultiplyAnswer({
  answer,
  classNameContainer = "",
  active = false,
  onClick,
}: IAnswerProps) {
  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
    event?.stopPropagation();
    event?.preventDefault();
    onClick && onClick(answer);
  };

  return (
    <div
      role="button"
      className={`${styles.container} ${classNameContainer} ${
        active ? styles.active : ""
      }`}
      onClick={handleClick}
    >
      <span
        className={`${styles.text} ${
          answer.isWithIcon ? styles["with-icon"] : ""
        }`}
      >
        <span>{answer.name}</span>
      </span>
      <Checkbox
        id={`${answer.id}-${answer.value}`}
        name={`${answer.id}-${answer.value}`}
        active={active}
      />
    </div>
  );
}

export default MultiplyAnswer;
