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

const Side = () => {
  const { subs, setSubs } = useContext(CalendarStateContext);

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

    for (let i = 0; i < subs.length; i++) {
      sideSubjects.push(
        <SideSubject key={i} subject={subs[i]} setSubs={setSubs} />
      );
    }

    return sideSubjects;
  };

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

export default Side;