import { IAnswer } from "@/data";
import styles from "./styles.module.css";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

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

function Answer({
  answer,
  type = "single",
  active,
  classNameContainer = "",
  disabled = false,
  gender = "male",
  onClick,
}: IAnswerProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  return (
    <button
      className={`${styles.container} ${
        active ? styles.active : ""
      } ${classNameContainer} ${disabled ? styles.disabled : ""} ${
        styles[gender]
      }`}
      onClick={onClick}
    >
      {type !== "only-text-single" && (
        <img className={styles.icon} src={answer.icon} alt={answer.id} />
      )}
      <p className={styles.answer}>{translate(answer.answer)}</p>
      {type === "multiply" && (
        <div className={styles.circle}>
          {active && <img src="/check-mark.svg" alt="Check mark" />}
        </div>
      )}
    </button>
  );
}

export default Answer;
