import { Button, Card, Stack } from "react-bootstrap";
import { useNavigate } from "react-router-dom";

// Get Section data from API
const Section = ({ section, studentData, token }) => {
  let sectionRender = <></>;
  const navigate = useNavigate();
  const evalButtonOnClick = () => {
    navigate(`/evaluation`, {
      state: {
        token: token,
        courseid: section.course.id,
        semester: section.semester,
        id: section.id,
        studentData: studentData,
      },
    });
  };

  section ? (
    (sectionRender = (
      <Card
        body
        className="border col-md-6 col-sm-6"
        onClick={evalButtonOnClick}
        style={{
          letterSpacing: ".05rem",
          fontSize: 20,
          color: "#565656",
          cursor: "pointer",
          borderRadius: "10px",
          backgroundColor: "#F8F8F8",
        }}
      >
        <strong
          style={{ display: "flex", justifyContent: "center" }}
        >{`${section.reference} ${section.course.number} ${section.name} ${section.course.name}`}</strong>
      </Card>
    ))
  ) : (
    <></>
  );

  return sectionRender;
};

export default Section;
