import { CircleFill, Circle } from "react-bootstrap-icons";
import check from "../Assets/Images/check.png";
import "../styles/radio.scss";

const Radio = (props) => {
  const {
    name,
    description,
    onClick,
    value,
    price,
    disabled,
    activeRadioOption,
    details,
    isAnnual,
    isUpgrade,
    currentPlan,
    parentIndex,
  } = props;

  const classCheckbox = "checkbox";
  const classOption = "option";
  const index = isAnnual === 1 ? Number("1") : Number("0");

  const upgradeClass = isUpgrade ? "upgrade" : "not-upgrade";

  return (
    <div className="radio-container">
      <div className="radio-option-container" key={name}>
        <>
          <div className={`radio-circle-container ${upgradeClass}`}>
            <div
              className="radio-circle-top"
              onClick={() => !disabled && onClick && onClick(value)}
            >
              {value == activeRadioOption && !isUpgrade ? (
                <div className="radio-circle-box">
                  <CircleFill color="#1a76c7" size="20px" />
                </div>
              ) : (
                <div className="radio-circle-box">
                  <Circle color="#1a76c7" size="20px" />
                </div>
              )}
              <div className="radio-name-box"> {`${name}`} </div>
              <div className="radio-price-box">
                {parentIndex > 2 ? (
                  <div className="radio-price">
                    {`$${price[index]["amount"]}/doc`}
                  </div>
                ) : (
                  <div className="radio-price">
                    {`$${price[index]["amount"]}/mo`}
                  </div>
                )}
              </div>
            </div>
            <div className="radio-circle-lower">
              <div className="radio-description-box">
                {description.map((item, i) => {
                  const el =
                    item == "First month free!" && !isUpgrade ? (
                      <div className="offer-div">
                        <p className="signup-feat-item-bold">{item}</p>
                      </div>
                    ) : (
                      <p className="signup-feat-item">{item}</p>
                    );
                  return el;
                })}
              </div>
              <div className="radio-description-box">{`${details}`} </div>
            </div>
          </div>
        </>
      </div>
    </div>
  );
};

export default Radio;