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

const ManageStutentsPage = ({cid}) => {
  const [studentData, setStudentData] = useState([]);

  useEffect(() => {
    // makeRequest({
    //   url: `http://localhost:5000/course/${cid}/students`,
    //   method: "GET",
    // })
    //   .then((req) => req.json())
    //   .then((data) => {
    //     setStudentData(data.courses);
    //   })
    //   .catch((err) => {
    //     console.error(err);
    //   });
  }, []);

  return (
    <div>
      <MyNavbar />
      <Container className="p-5 border">
        <h1 className="mb-4">Manage Students</h1>
        <Table bordered striped hover>
          <thead>
            <tr>
              <th>#</th>
              <th>Username</th>
              <th>Email</th>
              <th>Manage</th>
            </tr>
          </thead>
          <tbody>
            {studentData.map((student, k) => {
              return (
                <tr key={k}>
                  <td>{student.id}</td>
                  <td>{student.username}</td>
                  <td>{student.email}</td>
                </tr>
              );
            })}
          </tbody>
        </Table>
      </Container>
    </div>
  );
};

export default ManageStutentsPage;