import { useNavigate } from "@solidjs/router";
import { JSXElement, Show } from "solid-js";

import { Arrow, EngagementIcon } from "../Util/Icons";
import { Post } from "../Util/api";

/**
 * PostSegment is used to display posts in both the main feed and the post view
 * 
 * @param {Object} props The properties for the PostSegment component.
 * @param {Post} props.post The post to display.
 * @returns {JSXElement} A JSXElement of a post
 */
export function PostSegment({ post }: { post: Post }): JSXElement {
  const nav = useNavigate();

  const dateOfCreation = new Date(post.createdAt).toDateString();
  const isEdited = !(post.createdAt == post.updatedAt);

  return (
    <div class="card compact w-full flex-grow border-b-2 border-b-primary bg-base-200 text-base-content transition-all hover:bg-base-300">
      <div class="card-body md:mx-6">
        <h3>{dateOfCreation}</h3>
        <Show when={isEdited}>
          <p>This post has been edited</p>
        </Show>
        <p class="break-words text-base-content md:pt-2">{post.content}</p>
        <div class="card-actions justify-between">
          <button
            // onClick={(engagement)}
            class="btn btn-xs hover:border-x-primary"
            aria-label="Show sign of engagement"
          >
            <EngagementIcon />
          </button>
          <button
            onClick={(): void => nav("/post/" + post.id)}
            class="btn btn-xs"
            aria-label="View post"
          >
            <Arrow />
          </button>
        </div>
      </div>
    </div>
  );
}