import { Link } from "react-router-dom";
import { Badge, ListGroup, ListGroupItemHeading } from "reactstrap";

import EssayTitleView from "src/forum/EssayTitleView";
import { EssayAPIEssay } from "src/wwwAPI";

const ForumItem = ({
  forum: { forumID, title, essays },
}: {
  forum: {
    forumID: string;
    title: string;
    essays: EssayAPIEssay[];
  };
}) => {
  return (
    <ListGroup>
      <ListGroupItemHeading>
        <Link to={`/forum/${forumID}`}>
          <Badge>{title}</Badge>
        </Link>
      </ListGroupItemHeading>
      {essays.map((essay) => {
        return (
          <EssayTitleView forumID={forumID} key={essay.essayID} essay={essay} />
        );
      })}
    </ListGroup>
  );
};

export default ForumItem;