import { useContext } from "react";
import { CalendarStateContext } from "../pages/Calendar";
import "../styles/Side.css";
import SideSubject from "./SideSubject";

const Side = () => {
  const { subsObj, dispatch } = useContext(CalendarStateContext);

  const renderSubs = () => {
    const sideSubjects = [];

    for (const code in subsObj) {
      sideSubjects.push(
        <SideSubject
          key={code}
          code={code}
          subject={subsObj[code]}
          dispatch={dispatch}
        />
      );
    }

    return sideSubjects;
  };

  return <aside>{renderSubs()}</aside>;
};

export default Side;