import Link from 'next/link'
import React from 'react'
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import { getPayloadHMR } from '@payloadcms/next/utilities'
import configPromise from '@payload-config'
import PostList from '@/components/Blocks/PostList'
import { PaginatedDocs } from 'payload/database'
import { Post } from 'types/payload-types'
import { COLLECTION_SLUG_POST } from '../(payload)/collections/config'

interface Props {}

export const dynamic = 'force-dynamic'

async function getPosts() {
  const payload = await getPayloadHMR({
    config: configPromise,
  })

  const posts: PaginatedDocs<Post> = await payload.find({
    collection: COLLECTION_SLUG_POST,
  })

  return posts
}

const Page = async (props: Props) => {
  const posts = await getPosts()

  return (
    <>
      <h1 className="">Nextload</h1>
      <p className="mt-3">
        {`Nextload is a pre-configured setup for Nextjs and PayloadCMS that makes it easy to get started with building your website. With Nextload, you'll have a complete development environment that you can run locally using Docker. This makes it easy to test and develop your website before deploying it to a production environment.`}
        <br />
        {`When you're ready to deploy the website on your own server, Nextload comes with a production environment that requires the use of Traefik as a reverse proxy. This setup provides a secure and scalable production environment for your website.`}
      </p>
      <section className="mt-4">
        <PostList posts={posts.docs} />
      </section>
    </>
  )
}

export default Page