import { Stack } from "react-bootstrap";
import Section from "./Section";

const SectionsToEvaluate = ({ sections, studentData, token }) => {
  let enrolledSectionsRender = <></>;

  sections && token ? (
    (enrolledSectionsRender = (
      <Stack gap={5} className="align-items-center">
        <strong style={{ fontSize: 49 }}>Sections to Evaluate</strong>
        {(sections.length > 0) ? sections.map((section, id) => (
          <Section key={id} section={section} studentData={studentData} token={token}/>
        )) : <div className="h3" >
                <br/> <br/> <br/>
                At the moment, you do not have any course to evaluate.
             </div>
        }
      </Stack>
    ))
  ) : (
    <></>
  );

  return <div className="EnrolledSections">{enrolledSectionsRender}</div>;
};

export default SectionsToEvaluate;
