import { CommentNode, Comment as CommentType } from "@/server/db/schema";
import React from "react";
import { buildCommentTree } from "@/lib/utils/comments";
import Comment from "./comment";
import { useSession } from "../session-provider";

function CommentList({
  comments,
  setReplyComment,
  commentRefs,
}: {
  comments: Array<CommentType>;
  setReplyComment: (comment: CommentNode) => void;
  commentRefs: React.MutableRefObject<Map<string, HTMLDivElement | null>>;
}) {
  const { session } = useSession();
  const commentTree = buildCommentTree(comments);

  return (
    <ul className="flex flex-col gap-4">
      {commentTree.map((comment) => (
        <Comment
          key={comment.id}
          session={session}
          comment={comment}
          setReplyComment={setReplyComment}
          setRef={(el) => commentRefs.current.set(comment.id, el)}
        />
      ))}
    </ul>
  );
}
export default CommentList;
