import { notFound } from "next/navigation";

import ListOfPosts from "@/components/pages/participant/how-it-works/list-of-posts";
import { fetchPostsByTag } from "@/services/blogActions";
import {
  InternalParticipantBlogTags,
  ParticipantBlogTagSentences,
} from "@/constants/blog-data";
import { formatSection } from "@/utils/posts-utils";

type Params = Promise<{ section: string }>;

export const revalidate = 60;

export async function generateMetadata({ params }: { params: Params }) {
  const { section } = await params;
  const formattedTitle = `${formatSection(section)} | How it works`;

  const description =
    section in ParticipantBlogTagSentences
      ? ParticipantBlogTagSentences[
          section as keyof typeof ParticipantBlogTagSentences
        ]
      : "Learn more about our research opportunities.";

  return {
    title: formattedTitle,
    description,
    openGraph: {
      title: formattedTitle,
      description,
      images: [
        {
          url: "/global-assets/pfr-logo-og-participant.svg",
          alt: "People for Research logo, featuring a person inside a circle, representing a focus on human-centered research and activities.",
          width: 200,
          height: 150,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      images: "/global-assets/pfr-logo-og-participant.svg",
      title: formattedTitle,
      description,
    },
  };
}

async function getAllPostsByInternalTag({ section }: { section: string }) {
  const data = await fetchPostsByTag([`hash-${section}`]);
  return data;
}

export default async function HowItWorksSectionPage({
  params,
}: {
  params: Params;
}) {
  const { section } = await params;

  if (section === InternalParticipantBlogTags.REGISTRATION_HUB) {
    notFound();
  }

  const allPostsBySection = await getAllPostsByInternalTag({
    section: section,
  });

  const { posts } = allPostsBySection;
  const sentence = (
    ParticipantBlogTagSentences as Record<InternalParticipantBlogTags, string>
  )[section as InternalParticipantBlogTags];

  return (
    <div className="flex flex-col min-h-screen bg-participant-light dark:bg-participant-dark">
      <ListOfPosts catchySentence={sentence} posts={posts} section={section} />
    </div>
  );
}