import { Button, Card, Stack } from "react-bootstrap";
import useFetchFromEndpoint from "../hooks/useFetchFromEndpoint";

const Course = ({ courseKey, sectionInfo }) => {
  const [courseResponse, courseErrors] = useFetchFromEndpoint(
    `/courses/${courseKey}/`
  );

  const evalButtonOnClick = () => {

  }

  let courseRender = <></>;

  courseResponse ? (courseRender = <Card body className="border mx-auto col-md-6">
    <Stack gap={5} direction="horizontal">
      <strong className="mx-auto col-6">{`${sectionInfo.reference} ${courseResponse.number} ${courseResponse.name} ${sectionInfo.name}`}</strong>
      <Button variant="primary" className=" mx-auto col-4" onClick={evalButtonOnClick}>Evaluate</Button>
    </Stack>
  </Card>) : <></>;

  return courseRender;
};

export default Course;
