// import { FreshContext, Handlers, PageProps } from "$fresh/server.ts";
import { PostCarousel } from "../../islands/PostCarousel.tsx";

// export interface PostItems {
//   title: string;
//   author: string;
//   publish_date: string;
//   truncated_content: string;
// }
//
// export interface PostReponse {
//   new_posts: Array<PostItems>;
//   popular_posts: Array<PostItems>;
//   hot_posts: Array<PostItems>;
// }
//
// export interface PostResponseOne {
//   post_id: number;
//   first_name: string;
//   last_name: string;
//   title: string;
//   body: string;
//   created_at: string;
// }
//
// export const handler: Handlers<Array<PostCard>> = {
//   GET(_req: Request, ctx: FreshContext) {
//     const results = fetch(`${Deno.env.get("BASE_URI")}/posts/all`);
//     return ctx.render(results.then((resp) => resp.json()));
//   },
// };

import { Handlers, PageProps } from "$fresh/server.ts";
import { Post } from "../../islands/PostCard.tsx";

interface PageData {
  featuredPosts: Post[];
  hotPosts: Post[];
  popularPosts: Post[];
}

export const handler: Handlers<PageData> = {
  async GET(_: any, ctx: any) {
    const [featuredResult, hotResult, popularResult] = await Promise.all([
      fetch(`${Deno.env.get("BASE_URI")}/posts/all`),
      fetch(`${Deno.env.get("BASE_URI")}/posts/hot`),
      fetch(`${Deno.env.get("BASE_URI")}/posts/popular`),
    ]);

    // Parse all JSON responses concurrently
    const [featuredPosts, hotPosts, popularPosts] = await Promise.all([
      featuredResult.json(),
      hotResult.json(),
      popularResult.json(),
    ]);

    return ctx.render({
      featuredPosts,
      hotPosts,
      popularPosts,
    });
  },
};

export default function PostPage({ data }: PageProps<PageData>) {
  const { featuredPosts, hotPosts, popularPosts } = data;

  return (
    <div class="space-y-12 py-8">
      <section>
        <h2 class="text-2xl font-bold mb-4">Featured Posts</h2>
        <PostCarousel posts={featuredPosts} />
      </section>
      <section>
        <h2 class="text-2xl font-bold mb-4">Recent Posts</h2>
        <PostCarousel posts={hotPosts} />
      </section>
      <section>
        <h2 class="text-2xl font-bold mb-4">Popular Posts</h2>
        <PostCarousel posts={popularPosts} />
      </section>
    </div>
  );
}