import { useEffect, useState } from "react";
import { Container } from "react-bootstrap";
import MyNavbar from "../components/MyNavbar";
import { makeRequest } from "../utils.ts";

const CoursePage = ({ id }) => {
  const [courseData, setCourseData] = useState({});

  useEffect(() => {
    makeRequest({ endpoint: `course/${id}` })
      .then((resp) => resp.json())
      .then((data) => {
        setCourseData(data);
      });
  }, []);

  return (
    <div>
      <MyNavbar />
      <Container className="p-5 border">
        <h1>{courseData.name}</h1>
        <h4 className="mb-4">{courseData.instructor}</h4>
        <hr />
        <h4>Assignments</h4>
      </Container>
    </div>
  );
};

export default CoursePage;
