import { ButtonHTMLAttributes } from "react";
import styles from "./styles.module.scss";
import Checkbox from "../Checkbox";

interface IAnswer {
  id: string;
  title: string | React.ReactNode;
}

type TAnswerProps = {
  answer: IAnswer;
  isSelected?: boolean;
  selectedClassName?: string;
  answerType?: "checkbox" | "radio";
} & ButtonHTMLAttributes<HTMLButtonElement>;

function Answer({
  answer,
  isSelected,
  className = "",
  selectedClassName = styles.selected,
  answerType = "radio",
  ...props
}: TAnswerProps) {
  return (
    <button
      {...props}
      className={`${styles.container} ${className} ${isSelected ? selectedClassName : ""} ${answerType === "checkbox" ? styles.checkbox : ""}`}
      onClick={props.onClick}
    >
      <span className={styles.title}>{!props.children && answer.title}</span>
      {!!props.children && props.children}
      {answerType === "checkbox" && (
        <Checkbox
          id={answer.id}
          name={`${answer.id}_name`}
          active={!!isSelected}
        />
      )}
    </button>
  );
}

export default Answer;
