import type { PostContent } from "./post";
import { Link } from "react-router";

export interface StaticPostProps {
  postContent: PostContent
}

// This is a version of Post without logic that just takes the content directly.
// Doing this cuts down on loading time since we don't have to manually view every reply.
export default function StaticPost({ postContent }: StaticPostProps) {
  let name = "";
  if (postContent.author?.display_name) {
    name = postContent.author?.display_name
  } else {
    name = postContent.author?.name
  }
  console.debug(postContent.author?.name);

  return (
    <div className="flex-col w-fit">
      <div className="bg-[#151515] rounded-2xl ring-1 ring-[#333] hover:ring-[#ddd] shadow-black/10 shadow-md transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-102 hover:ring-1 p-4 m-5 w-fit">
        <div className="flex items-baseline pb-2">
          <p className="text-[10px] pr-2">#{postContent.id}</p>
          <p className="text-xl font-bold pr-2">{postContent.title}</p>
          <p className="pr-2">{name}</p>
          <p className="text-[10px] pr-2">Created at: {postContent.createdAt}</p>
          <p className="text-[10px] pr-2">Parent: #{postContent.parentId}</p>
        </div>
        <p className="text-md">{postContent.content}</p>
        <div className="mb-2 my-4 flex gap-4">
          <Link to="/create" state={{ parentId: postContent.id }} className="p-2 px-3 bg-[#151515] text-white rounded-lg font-medium shadow-lg hover:bg-[#f0f0f0] hover:text-[#151515] hover:ring-[#f0f0f0] ring-1 ring-[#7f7f7f] transition ease-in-out duration-250">Reply</Link>
          <Link to="/view" state={{ parentId: postContent.id }} className="p-2 px-3 bg-[#151515] text-white rounded-lg font-medium shadow-lg hover:bg-[#f0f0f0] hover:text-[#151515] hover:ring-[#f0f0f0] ring-1 ring-[#7f7f7f] transition ease-in-out duration-250">View</Link>
        </div>
      </div>
      <div className="ml-8">
        {postContent.replies && postContent.replies.length > 0 && (
          postContent.replies.map((reply) => (
            <StaticPost postContent={reply} />
          ))
        )}
      </div>
    </div>
  )
}