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

interface IAnswer {
  id: string;
  title: string;
}

type TAnswerProps = {
  answer: IAnswer;
  isSelected?: boolean;
  selectedClassName?: string;
} & ButtonHTMLAttributes<HTMLButtonElement>;

function Answer({
  answer,
  isSelected,
  className = "",
  selectedClassName = styles.selected,
  ...props
}: TAnswerProps) {
  return (
    <button
      {...props}
      className={`${styles.container} ${className} ${
        isSelected ? selectedClassName : ""
      }`}
      onClick={props.onClick}
    >
      {!props.children && answer.title}
      {!!props.children && props.children}
    </button>
  );
}

export default Answer;
