import Modal from "@mui/material/Modal";
import styles from "./styles.module.scss";
import Button, { IButtonProps } from "../../ui/Button";
import { DetailedHTMLProps, InputHTMLAttributes } from "react";

interface IInputAnswerModalProps {
  open: boolean;
  inputProps: DetailedHTMLProps<
    InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  >;
  buttonProps: IButtonProps;
  title?: string;
  placeholder?: string;
  buttonText?: string;
  onClose: () => void;
}

function InputAnswerModal({
  open,
  buttonProps,
  inputProps,
  title = "Enter your own answer",
  placeholder = "Type what’s on your mind...",
  buttonText = "Send your answer",
  onClose,
}: IInputAnswerModalProps) {
  return (
    <Modal
      open={open}
      onClose={onClose}
      aria-labelledby="modal-modal-title"
      aria-describedby="modal-modal-description"
    >
      <div className={styles.container}>
        <button
          type="button"
          className={styles["close-icon"]}
          onClick={onClose}
        >
          <span className={styles["close-icon-label"]}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              role="img"
            >
              <title>cross</title>
              <path d="M10.051 12l-10.051 10.051 1.949 1.949 10.051-10.051 10.051 10.051 1.949-1.949-10.051-10.051 10.051-10.051-1.949-1.949-10.051 10.051-10.051-10.051-1.949 1.949 10.051 10.051z"></path>
            </svg>
          </span>
        </button>
        <h2 className={styles.title}>{title}</h2>
        <div className={styles["input-container"]}>
          <div className={styles["input-wrapper"]}>
            <input
              name="custom-answer"
              placeholder={placeholder}
              type="text"
              value=""
              {...inputProps}
            />
          </div>
        </div>
        <Button classNameContainer={styles.button} {...buttonProps}>
          {buttonText}
        </Button>
      </div>
    </Modal>
  );
}

export default InputAnswerModal;
