import { JSXElement } from "solid-js";

import { PublicComment } from "../Util/api";

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">
        <time class="text-xs opacity-50">{comment.created_at}</time>
      </div>
      <div class="chat-bubble">{comment.content}</div>
      <div class="chat chat-end">
        <time class="text-xs opacity-50">Reply created_at</time>
        <div class="chat-bubble">Replies to parent comment if any</div>
      </div>
    </>
  );
}