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

import { loadSpinner } from "../Util/Icons";
import { getPost } from "../Util/api";
import { PostSegment } from "./Posts";

export function SinglePost(): JSXElement {
  const params = useParams();
  const [post] = createResource(params.postid, getPost);

  return (
    <Suspense fallback={loadSpinner()}>
      <Show when={post()}>
        <PostSegment post={post()!} />
      </Show>
    </Suspense>
  );
}
