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

const Radio = (props) => {
  console.log("hello");
  const {
    name,
    description,
    onClick,
    value,
    price,
    disabled,
    activeRadioOption,
    details,
  } = props;
  const classCheckbox = "checkbox";
  const classOption = "option";
  console.log("value, activeRadioOption", value, activeRadioOption);
  return (
    <div>
      <div
        className="radio-option-container"
        key={name}
        onClick={() => !disabled && onClick && onClick(value)}
      >
        {value == activeRadioOption ? (
          <>
            <div className="radio-circle-container">
              <div className="radio-circle-top">
                <div className="radio-circle-box">
                  <CircleFill color="#1a76c7" size="20px" />
                </div>
                <div className="radio-name-box"> {`${name}`} </div>
                <div className="radio-price-box">
                  <div className="radio-price"> {`${price}`} </div>
                </div>
              </div>

              <div></div>
              <div className="radio-circle-lower">
                <div className="radio-description-box">
                  {" "}
                  {`${description}`}{" "}
                </div>
                <div className="radio-description-box">{`${details}`} </div>
              </div>
            </div>
          </>
        ) : (
          <>
            <div className="radio-circle-container">
              <div className="radio-circle-top">
                <div className="radio-circle-box">
                  <Circle color="#1a76c7" size="20px" />
                </div>
                <div className="radio-name-box">{`${name}`} </div>
                <div className="radio-price-box">
                  <div className="radio-price"> {`${price}`} </div>
                </div>
              </div>
              <div className="radio-circle-lower">
                <div className="radio-description-box">{`${description}`} </div>
                <div className="radio-description-box">{`${details}`} </div>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default Radio;