import configPromise from "@payload-config";
import { getPayload } from "payload";
import { notFound } from "next/navigation";
import { RichText } from "@payloadcms/richtext-lexical/react";

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const payload = await getPayload({ config: configPromise });
  const { slug } = await params;

  const result = await payload.find({
    collection: "news",
    where: {
      slug: {
        equals: slug,
      },
    },
    depth: 1,
  });

  const item = result.docs[0];

  if (!item) {
    notFound();
  }

  return (
    <div>
      <h1>{item.title}</h1>
      <RichText data={item.content} className="prose bg-gray-50 p-2" />
    </div>
  );
}

export async function generateStaticParams() {
  const payload = await getPayload({ config: configPromise });

  const newsItems = await payload.find({
    collection: "news",
    depth: 1,
    limit: 5,
    select: {
      slug: true,
    },
  });

  return newsItems.docs.map((item) => ({
    slug: item.slug,
  }));
}