import { createSignal } from "solid-js";
import { getPosts } from "./api";
import { Post } from "./api";

export function Posts() {
  const [posts, setPosts] = createSignal([] as Post[]);
  const [loading, setLoading] = createSignal(true);

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

  return (
    <div class="flex flex-col space-y-2 w-full md:w-96">
      {loading() ? (
        <span class="loading loading-spinner loading-lg self-center"></span>
      ) : (
        <></>
      )}
      {posts().map((post) => {
        if (post.content == "") return; // Filtering out empty posts, remove this later
        return <PostSegment post={post}></PostSegment>;
      })}
    </div>
  );
}

// This is the card container for a post
export function PostSegment({ post }: { post: Post; }) {
  return (
    <div class="card bg-base-200 shadow-lg compact text-base-content w-full">
      <div class="card-body">
        <p class="text-base-content break-words">{post.content}</p>
      </div>
    </div>
  );
}