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

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

  const newsItems = await payload.find({
    collection: "news",
    depth: 1,
    limit: 5,
    select: {
      title: true,
      content: true,
    },
    sort: "-created_at",
  });

  return (
    <div>
      <h1>My Homepage</h1>
      <p>My Homepage content.</p>

      <h2>
        <Link href="/news">Latest News</Link>
      </h2>
      <ul>
        {newsItems.docs.map((newsItem) => (
          <li key={newsItem.id} className="p-4">
            <h3 className="text-2xl">{newsItem.title}</h3>
            <RichText
              data={newsItem.content}
              className="prose bg-gray-50 p-2"
            />
          </li>
        ))}
      </ul>
    </div>
  );
}