const SideSubject = ({ code, subject, dispatch }) => {
  const defaultColor = "#EFEFEF";

  const check = (e) => {
    dispatch({ type: "CHECKED", code });
    if (subject.selected) e.target.style["background-color"] = defaultColor;
    else e.target.style["background-color"] = subject.color;
  };

  return (
    <div className="SideSubject">
      <div
        className="ssc"
        onClick={check}
        style={{
          backgroundColor: subject.selected ? subject.color : defaultColor,
        }}
      ></div>

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

export default SideSubject;