import { JSXElement } from "solid-js";

import { ReplyIcon } from "../Util/Icons";
import { EngagementIcon } from "../Util/Icons";
import { PublicComment } from "../Util/api";

/**
 * 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 }: { comment: PublicComment }): JSXElement {
  return (
    <div class="flex min-w-full flex-col rounded-lg border-b-secondary border-b-2 bg-base-300 px-5 py-3 text-base-content transition-all hover:bg-base-300 ">
      <div class="flex flex-row">
        <div class="pb-2 text-xs text-gray-500">{comment.created_at}</div>
      </div>
      <div class="text-sm">{comment.content}</div>

      <div class="flex justify-between py-5 align-baseline">
        <div class="btn self-start">
          {/* Placeholder icon, tbd */}
          <EngagementIcon />
        </div>
        <div class="btn self-end">
          <ReplyIcon />
        </div>
      </div>
    </div>
  );
}