const SideSubject = ({ subject }) => {
  let isChecked = false;
  const defaultColor = "#EFEFEF";
  const bgc = "background-color";

  const check = (e) => {
    if (isChecked) e.target.style["background-color"] = defaultColor;
    else e.target.style["background-color"] = subject.color;
    isChecked = !isChecked;
  };

  return (
    <div className="SideSubject">
      <div
        className="ssc"
        onClick={check}
        style={{
          [bgc]: isChecked ? subject.color : defaultColor,
        }}
      ></div>

      <span>{subject.name}</span>
    </div>
  );
};

export default SideSubject;