import { For, JSXElement, Show, createSignal } from "solid-js";

import { loadSpinner } from "../Util/Icons";
import { Post, getPosts } from "../Util/api";
import { PostSegment } from "./PostSegment";

/**
 * Posts is a component that displays a collection of posts.
 * @returns {JSXElement} A JSXElement that contains a collection of posts.
 */
export function Posts(): JSXElement {
  const [posts, setPosts] = createSignal([] as Post[]);
  const [loading, setLoading] = createSignal(true);

  getPosts().then((posts) => {
    setPosts(posts);
    setLoading(false);
  });

  return (
    <Show when={!loading()} fallback={loadSpinner()}>
      <For each={posts()}>
        {(post): JSXElement => <PostSegment post={post} />}
      </For>
    </Show>
  );
}