import { JSXElement } from "solid-js";

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

interface CommentProps {
  comment: PublicComment;
}

export function Comment(props: CommentProps): JSXElement {
  return (
    <>
      <div class="chat chat-start py-5">
        <time class="text-xs opacity-50">{props.comment.created_at}</time>
      </div>
      <div class="chat-">{props.comment.content}</div>
      <div class="divider"></div>
      <div class="chat chat-end">
        <div class="flex-col">
          <time class="time-end text-xs opacity-50">Reply created_at</time>
          <div class="chat-end">Replies to parent comment if any</div>
        </div>
      </div>
      <div class="divider divider-end">
        <ReplyButton />
      </div>
    </>
  );
}