import React from "react";
import { View, Text } from "react-native";
import { getPosts, Post } from "../util/api";
import { PostView } from "./PostView";
import { StyleSheet } from "react-native";

export function PostsContainer(): JSX.Element {
  const [posts, setPosts] = React.useState<Post[]>([]);

  React.useEffect(() => {
    async function fetchPosts(): Promise<void> {
      const posts = await getPosts();
      setPosts(posts);
    }
    fetchPosts();
  }, []);

  return (
    <View style={style.container}>
      <Text>Hello World!</Text>
      {posts.map((post) => (
        <PostView key={post.id} post={post} />
      ))}
    </View>
  );
}

const style = StyleSheet.create({
  container: {
    height: '100%',
    padding: 5,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-start',
    backgroundColor: '#fff', // For the container holding the posts
  },
});