import configPromise from "@payload-config";
import Link from "next/link";
import { getPayload } from "payload";

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

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

  return (
    <div>
      <h1>Projects</h1>

      <ul>
        {projectItems.docs.map((projectItem) => (
          <li key={projectItem.id} className="p-4">
            <h3 className="text-lg">
              <Link
                href={`
                /projects/${projectItem.slug}`}
              >
                {projectItem.title}
              </Link>
            </h3>
          </li>
        ))}
      </ul>
    </div>
  );
}