import { CircleFill, Circle } from "react-bootstrap-icons";

const Radiogroup = (props) => {
  const {
    className,
    classNames,
    labelText,
    title,
    price,
    ref,
    onClick,
    value,
    options,
    disabled,
    radioError,
  } = props;
  const classCheckbox = "checkbox";
  const classOption = "option";

  return (
    <div className="radio-option-container">
      {title && <div className="checkbox-title">{title}</div>}
      <div className="checkbox-option-div">
        {options &&
          options?.length &&
          options.map((option, index) => (
            <div
              className="option-container"
              key={option.name}
              onClick={() => !disabled && onClick && onClick(option)}
            >
              <div className="checked-icon">
                {value === option.value ? (
                  <div className="zora">
                    <div className="circle-container">
                      <CircleFill
                        className={
                          value === option.value
                            ? "clickable-icon-active"
                            : "clieckable-icon"
                        }
                        color="#1a76c7"
                        size="20px"
                        onClick={(e) => {
                          !disabled && onClick(e);
                        }}
                      />
                    </div>

                    <div
                      className="option-label"
                      htmlFor={"helper-radio-" + index}
                    >
                      {option.name}
                    </div>
                  </div>
                ) : (
                  <div className="zora">
                    <div className="circle-container">
                      <Circle
                        className={
                          value === option.value
                            ? "clickable-icon-active"
                            : "clieckable-icon"
                        }
                        color="#1a76c7"
                        size="20px"
                        onClick={(e) => {
                          !disabled && onClick(e);
                        }}
                      />
                    </div>
                    <div
                      className="option-label"
                      htmlFor={"helper-radio-" + index}
                    >
                      {option.name}
                    </div>
                  </div>
                )}
              </div>
            </div>
          ))}
      </div>
      <div className="radio-error-box">
        {radioError ? (
          <div className="modal-document-error">{radioError}</div>
        ) : (
          <></>
        )}
      </div>
    </div>
  );
};

/**
 * A radio button is a quick way to extract a single coded answer from our users by presenting multiple possibilities and allowing only one option to be chosen.
 */

export default Radiogroup;