import { JSXElement } from "solid-js";

import { PublicComment } from "../Util/api";
import ReplyButton from "./Buttons/Reply";

interface CommentProps {
  comment: PublicComment;
}

/**
 * Comment is a component that displays a single comment.
 * @param {Object} props The properties for the Comment component.
 * @param {string} props.postId The id of the post that the comment is a reply to.
 * @returns {JSXElement} A JSXElement of a comment
 */
export function Comment({ comment }: CommentProps): JSXElement {
  return (
    <>
      <div class="chat chat-start py-5">
        <time class="text-xs opacity-50">{comment.created_at}</time>
      </div>
      <div class="chat-">{comment.content}</div>
        <div class="divider"></div>
      <div class="chat chat-end">
        <div class="flex-col">
        <time class="text-xs opacity-50 time-end">Reply created_at</time>
        <div class="chat-end">Replies to parent comment if any</div>
        </div>
      </div>
        <div class="divider divider-end"><ReplyButton/></div>
    </>
  );
}
