import { Handlers, PageProps } from "$fresh/server.ts";
import { getPosts, Post } from "../lib/posts.ts";
import PostCard from "../components/PostCard.tsx";

export const handler: Handlers<Post[]> = {
  async GET(_req, ctx) {
    const posts = await getPosts();
    return ctx.render(posts);
  },
};

export default function PostsPage(props: PageProps<Post[]>) {
  const posts = props.data;
  return (
    <div class="min-h-screen p-4 sm:p-8">
      <h1 class="text-3xl sm:text-4xl font-bold text-primary mb-6 sm:mb-8 text-center">
        Posts
      </h1>
      <div class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto">
        {posts.map((post) => <PostCard key={post.slug} post={post} />)}
      </div>
    </div>
  );
}